Transforming brand logos through hover on image maps

Despite finding numerous posts addressing this issue, I am still encountering problems with my code:

<div id="product_tabs_description_tabbed_contents" style="display: block;"><img style="margin-left: -10px; opacity: 1 !important;" src="{{media url="brands.png"}}" alt="" width="754" usemap="#brands_map" /></div>
<a href="javascript:void(0)"><map class="maptest" name="brands_map"> 
<area title="Nike" shape="rect" coords="4,3,73,41" href="#" alt="Nike" class="0" />

<area title="Lonsdale" shape="rect" coords="99,7,168,45" href="#" alt="Lonsdale" class="1" />

<area title="No Fear" shape="rect" coords="206,5,284,42" href="#" alt="No Fear" class="2" />

<area title="Karrimor" shape="rect" coords="317,9,376,62" href="#" alt="Karrimor" class="3" />
 </map> </a>

I have two images, one in black and white named first.png, and the other colored as second.png. My goal is to change the color of the current brand on hover, similar to what can be seen at .

As I am using an image map, I am struggling to configure the CSS for it to work properly. Moreover, I am unable to access my external CSS file, which requires me to directly embed the CSS code in HTML.

htmlcssimagedictionaryhover

Answer №1

To add a nice CSS fade-in transition to your black and white logo turning into color, you can use the following code:

HTML:

<div class="logo">
 <!-- black and white logo --> 
     <img src="batman-logo-bw.png" />
     <div class="logocolor">
        <!-- color logo --> 
        <img src="batman-logo-color.png" />
     </div>
  </div>

CSS:

div.logo {
  float:left;
  margin:20px;
  position:relative;
}

div.logo div.logocolor {
  position:absolute;
  top:0;
  left:0;
  opacity:0;
  -moz-opacity:0;
  -webkit-opacity:0;
  -moz-transition:0.2s;
  -webkit-transition:0.2s;
  -o-transition:0.2s;
}

div.logo:hover div.logocolor {
  opacity:1;
  -moz-opacity:1;
  -webkit-opacity:1;
}

You can view it in action here on my fiddle:

http://jsfiddle.net/XhDBw/1/

If you prefer, you can simplify by removing the second nested div and only using the image. In that case, apply this CSS to handle the transition for the last-child image:

div.logo img:last-child {
  position:absolute;
  top:0;
  left:0;
  opacity:0;
  -moz-opacity:0;
  -webkit-opacity:0;
  -moz-transition:0.2s;
  -webkit-transition:0.2s;
  -o-transition:0.2s;
}

div.logo:hover img:last-child {
  opacity:1;
  -moz-opacity:1;
  -webkit-opacity:1;
}

Hope this helps!

Best regards,

Jeroen

Answer №2

To achieve this, you don't need to use any map tags. There are two ways you can do it:

<li><a href="#" id="first"><img src="blackenwhite.jpg"></a></li>
<li><a href="#" id="first"><img src="blackenwhite.jpg"></a></li>

Then change the src attribute of the images using jQuery in a hover event.

Alternatively,

You can achieve it with just CSS, which is much easier:

<li><a href="#" id="first" class="brands">Brand 1</a></li>
<li><a href="#" id="first" class="brands">Brand 2</a></li>

This would be the CSS:

.brands { text-indent:-1000px;}
#first {background:url('blackenwhite.jpg') no-repeat center center;}
#first:hover {background:url('color.jpg');}

Repeat this for each brand. Hope this helps! :D

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Setting a CSS style for an ASP.NET button: What you need to know!

I am facing an issue with the styling of my asp:Button. I have applied CSS styles using the cssClass property, but they are not being applied correctly. Surprisingly, when I switch to using asp:LinkButton, the styles work perfectly fine. I prefer not to us ...

asp.netcssbuttonaspbutton

What is the process for adjusting the color of a particular date in the <input type=Date> field?

Is there a way to modify the styling, such as color, of the input type date in HTML 5? In HTML 5, we can display a calendar using <input type=date>. For example, if March 23rd is a holiday and I want to highlight this specific date in red, how can I ...

jquerycsshtmldatecalendar

Submitting form data via Ajax to be processed by Express.js with body parser

Having trouble sending form data to Node.js via AJAX. Using Express with body parser on Node.js However, receiving undefined in req.body. After searching extensively online and trying various solutions without success, I am seeking assistance on the c ...

htmlnode.jsajaxexpressbody-parser

While using the Android Firefox browser, I noticed that the keyboard is causing my screen to shrink in size

As I work on creating a cross-platform HTML page, I have encountered an issue with text fields on Android smartphones. When I attempt to type in a text box, the keyboard pops up and causes my HTML page to shrink within the viewport. I'm curious to kn ...

androidhtmlcsssvgkeyboard

Challenge with Bootstrap Popover: Unable to Capture Button Click Event inside Popover

First of all, here's a link to the problem on jsfiddle: jsfiddle.net The issue I'm facing is with a popover that contains html content including a button with the class "click_me". I've set up jQuery to listen for a click on this button and ...

jqueryhtmltwitter-bootstrappopover

PHP A more organized method for passing button values when the value is specifically 0

Hey there, I've come across a situation where I had to make some tweaks to my code to get it working. I'm curious if there is a cleaner solution out there that I might be missing, or if my workaround is actually the best approach for solving this ...

phphtmlbutton

What is the best way to assign group headings to my Codeigniter view results?

One of the challenges I'm facing in my view is organizing a list like this: <? foreach($services as $service): ?> <tr> <td><?= $service->name; ?></td> <td><?= $service->format; ?></td> < ...

phphtmlcodeigniter

Ensuring the text remains positioned above another element constantly

Looking to have the text float above a regular box and resize the font size accordingly? Here's what I've tried: https://jsfiddle.net/a87uo3t2/ @import url('https://fonts.googleapis.com/css?family=Share+Tech+Mono'); body { margin: ...

htmlcss

Manipulating CSS Class Properties Using JavaScript

In my JavaScript application, there is a functionality that loads a list of items for users to click and view detailed information in a separate div on the page. Users should be able to interact with and make modifications to these individual item overview ...

javascriptcsstypescriptless

Why does appending to a TextArea field fail in one scenario but succeed in another when using Javascript?

There is a JavaScript function that captures the value from a select dropdown and appends it to the end of a textarea field (mask) whenever a new selection is made. function addToEditMask(select, mask) { var selectedValue = document.getElementById(sel ...

javascripthtmlbootstrap-4

The navigation pills in Bootstrap 5 are experiencing functionality issues

Hey everyone, I'm currently tackling a new project and running into an issue with Bootstrap 5 nav pills. I need them to toggle between column and grid view, but they aren't behaving as expected (content displays fine on the first pill, but nothin ...

htmlcssbootstrap-4bootstrap-5cdn

Switching the Vue image on Routerlink's isExactActive feature

Is there a way to display different images based on whether a link is active or not? <router-link to="/"> <img src=" :active = isExactActive ? pic_active.png : pic_inactive.png}}" /> //Something along these lines ...

htmlvue.jsrouterlinkrouterlinkactive

When using JQuery Validation on a small screen, error messages can cause the button to shift downwards

After successfully creating an email form with jquery validation error style that appears when there's an error, I encountered a problem. When the screen width is reduced or viewed on a small screen, the error message pushes down the button. I&apos ...

jquerycssjquery-validate

Is there a way to locate the content enclosed within a span tag without any specific class or ID attribute using Selenium with Python?

I have been attempting to utilize Selenium in order to locate the text within a span element that lacks any specific attributes such as class or id for identification. Here is the HTML structure: HTML snippet obtained from inspecting the element in Chrome ...

pythonhtmlseleniumweb-scraping

Creating triangular side tabs with borders using CSS and HTML styling

I'm looking for a way to create triangle side navigation tabs similar to this example. I attempted using :after pseudo-element in my CSS: .tabs input + label:after{ content:""; float:left; position:absolute; top:0; right:-12px; width:0; height:0; bor ...

htmlcsstabs

Update the 'checked' attribute of a radio button when the form is submitted

How do I dynamically change the content of an HTML table based on which radio button a user selects using jQuery? For example, when the page loads, I want the United Kingdom radio button to be checked and the table content to display as 'blue'. I ...

javascriptphpjqueryhtmlforms

Implementing the disabled style for an ASP.net dropdownlist

Imagine I have an ASP.net dropdownlist set up like this: <asp:DropDownList ID="ddOwnershipDocumentType" class="msbdd" runat="server"> </asp:DropDownList> Let's take a look at the style definition for msdbdd: .msbdd { font-family: WM ...

cssasp.netwebforms

Enabling hover effects to scroll divs only when interacted with

I am aiming to achieve two separate scrolling divs and I'm uncertain about the exact approach. Experimenting with various overflow properties has only resulted in one scrolling independently. .profile { width: 100%; display: flex; ...

javascriptcssreactjs

CSS designs that adapt flawlessly to high-resolution mobile devices with perfect responsiveness

Currently, I am implementing max-width: 768px to modify the appearance of my website. However, with the increasing number of high-resolution devices available in the market such as 4K mobile phones, I am wondering how I can detect them. Should I consider ...

htmlcss

Achieving the perfect vertical alignment of navigation buttons alongside a responsive image

Is there a way to ensure that the button always vertically aligns in the middle of the image responsively? I've managed to make the image responsive using .img-responsive, but I'm having trouble keeping the arrow centered on the image at all time ...

htmlcsstwitter-bootstrap-3