...

View Full Version : image rollovers in CSS-based nav bar?



robinogi
06-01-2007, 04:35 AM
I have a navigation bar for my site here (http://www.deepwaterchurch.com/prelive) and I was wondering if there was an easy way to replace the images on rollover using CSS. Basically, I just want to replace the item they have their mouse over with a colored or otherwise emphasized version. This would apply to both the horizontal menu items, and each of their sub-menu items. Thanks in advance.

cheat
06-01-2007, 06:22 AM
ok first off you would be better posting in the javascript forum.
so anyway the best way to do a image rollover is with this:
<script type="text/javascript">
var revert = new Array();
var inames = new Array('smirk');

// Preload
if (document.images) {
var flipped = new Array();
for(i=0; i< inames.length; i++) {
flipped[i] = new Image();
flipped[i].src = "media/"+inames[i]+"2.gif";
}
}

function over(num) {
if(document.images) {
revert[num] = document.images[inames[num]].src;
document.images[inames[num]].src = flipped[num].src;
}
}
function out(num) {
if(document.images) document.images[inames[num]].src = revert[num];
}
</script>

put that in the <head> tag

then to insert the images do

<img src="image url here" name="image" onMouseOver="over(0)" onMouseOut="out(0)">

just put that where you want it to run the rollover.

hope this helps.

VIPStephan
06-01-2007, 08:49 AM
No, this isnít the best way, and no, the JavaScript forum is the wrong place for a CSS rollover question. Wellstyled (http://www.wellstyled.com/css-nopreload-rollovers.html) has a nice article on how to do CSS image rollovers without preloading (althoug I prefer the images above one antoher, not next to each other).
I donít have the time for long explanations now. Iíve recently done a site (http://black-coffee.info/) with advanced usage of that technique, maybe you can learn from that (by checking out the relevant stylesheet (http://black-coffee.info/header_nav.css)).

zach4618
06-02-2007, 11:15 PM
Does anyone know of a fix for an <a> element not displaying width properly? I have a series of links and images all in one line, but the anchored tags are not appearing at all.


<div id="navigation">
<img alt="left" src="images/left.jpg" /><a id="index" href="index.html"></a><img alt="divider1" src="images/divider1.jpg" /><a id="about" href="about.html"></a><img alt="divider2" src="images/divider2.jpg" /><a id="gallery" href="gallery.html"></a><img alt="divider3" src="images/divider3.jpg" /><a id="contact" href="contact.html"></a><img alt="right" src="images/right.jpg" />
</div>


a#index {
background-image: url(images/home.jpg);
height: 50px;
width: 70px;
}

a#index:hover {
background-image: url(images/home.jpg);
background-position: 0 -50px;
}

a#about {
background-image: url(images/about.jpg);
height: 100px;
width: 80px;
}

a#about:hover {
background-image: url(images/about.jpg);
background-position: 0 -50px;
}

a#contact {
background-image: url(images/contact.jpg);
height: 100px;
width: 100px;
}

a#contact:hover {
background-image: url(images/contact.jpg);
background-position: 0 -50px;
}

a#gallery {
background-image: url(images/contact.jpg);
height: 100px;
width: 100px;
}

a#gallery:hover {
background-image: url(images/gallery.jpg);
background-position: 0 -50px;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum