PNG Transparency Rollovers in IE
Posted on Sep 26, 2005
I came across a solution for handling PNG transparencies that doesn't have the one major drawback that the prior solutions I blogged about have. Namely, that you could not add javascript to the PNG images, thereby preventing you from using them for rollover images. The latest solution I located is called Sleight and it is pretty simple to use. Simply place the slight.js and x.gif in your directory and just unclude the script:
Now, this doesn't handle transparency backgrounds and the rollover image I was using was actually a background for a button over which I was going to place the button text. I was able to create a solution to this using CSS as follows:
<div id="buttons">
<div id="button"><img src="images/button_off.png" id="game" /></div>
<div id="button"><img src="images/button_off.png" id="characters" /></div>
<div id="button"><img src="images/button_off.png" id="strategy" /></div>
</div>
<div id="labels">
<div id="label_txt" onmouseover="game.src='images/button_on.png'" onmouseout="game.src='images/button_off.png'" onclick="document.location.href='browse.cfm';">The Game</div>
<div id="label_txt" onmouseover="characters.src='images/button_on.png'" onmouseout="characters.src='images/button_off.png'" onclick="document.location.href='characters.cfm';">Characters</div>
<div id="label_txt" onmouseover="strategy.src='images/button_on.png'" onmouseout="strategy.src='images/button_off.png'" onclick="document.location.href='strategy.cfm';">Strategy</div>
</div>
</div>
Note that the labels and buttons are in seperate divs within the nav div. Also, in order to retain the rollover effect (because of layering we will cover in a few) the button images are actually given ids so that we can swap them using the onmouseover event on the label_txt div (since the label will be layered on top). Lastly, so that the entire button will link and not just the text, I use an onlick on my label_txt div. Here is the relevant CSS:
position: absolute;
left: 8px;
top: 145px;
}
#nav #buttons {
position: absolute;
left: 0px;
top: 0px;
}
#nav #buttons #button {
width: 155px;
height: 23px;
}
#nav #labels {
position: absolute;
left: 0px;
top: 0px;
}
#nav #labels #label_txt {
width: 145px;
height: 23px;
cursor: pointer;
text-align:right;
font-family: monospace;
font-size: 11px;
letter-spacing: -0.1em;
line-height: 23px;
}
There is some formatting in there which you don't really need to be concerned about. The relevant parts are that both the buttons and labels divs are positioned relative to the outer nav div in the same position so that the labels will layer over the buttons (at position 0,0). In order to ensure that they are placed properly, I give the button and label_txt divs the same dimensions. The label_txt div also has a cursor specified to make obvious it is a button with a link. (note: the nav div does not need to be absolutely positioned, but was for my particular case)
Anyway, that's it...Now I was able to layer my semi-transparent buttons over a background image and utilize text (i.e. the button labels) where images were once used.
Comments
Posted By Andy / Posted on 06/20/2006 at 4:02 AM
Posted By Naren / Posted on 11/27/2009 at 2:24 AM