Forums

mevaser

I have spend most of my day trying to do cross browsing this website: http://bit.ly/Ln8exT

The problem I can not figure out is that the middle menu beside the large image comes undone in IE7, it is an image rollover. Can any one throw me a bone? I can't find why this thing does not want to play with me.

Any help will be appreciated.

Thanks,

Senff

Working fine in my IE7, really....

mevaser

Senff, I know what you mean, some browsers show the Nav broken, I mean the one that has colors. My wife's pc shows it broken, but not this one. Weird,

Senff

What do you mean "some browsers" then? "IE7 on some computers", or different versions of different browsers? Is it just your wife's PC?

mevaser

I heard from others that have IE7 that this is an issue, yes.

Senff

Well, I don't really know those others so it's hard for me to figure out what the issue could be...

mevaser

The css way was not working, so I did it via jquery, ha ha.



jQuery(function($) {
    $(document).ready(function(){
		
		// Preload all rollovers
		$("#roller img").each(function() {
			// Set the original src
			rollsrc = $(this).attr("src");
			rollON = rollsrc.replace(/.jpg$/ig,"_over.jpg");
			$("<img>").attr("src", rollON);
		});
		
		// Navigation rollovers
		$("#roller a").mouseover(function(){
			imgsrc = $(this).children("img").attr("src");
			matches = imgsrc.match(/_over/);
			
			// don't do the rollover if state is already ON
			if (!matches) {
			imgsrcON = imgsrc.replace(/.jpg$/ig,"_over.jpg"); // strip off extension
			$(this).children("img").attr("src", imgsrcON);
			}
			
		});
		$("#roller a").mouseout(function(){
			$(this).children("img").attr("src", imgsrc);
		});
		
	    });
});



<div class="slider_in_training" id="rollers">
<div class="innernav"><a href="/training/"><img src="<?php bloginfo('template_directory'); ?>/images/roll_training.jpg" alt="Training" /></a></div>
</div>

Thanks,

treehouse : what would you like to learn today?

Forums

Image Rollover and IE7