On this page here: http://mrwgrp.com/index.php When you rollover the images in the header you get the images below. The client wants the original text to come back on the screen once you mouse off it.
Also, IE is not even showing the mouseover.
Any ideas? thanks, A
It seems there's some snag with IE not detecting mouseover if the DIV is empty. If you set the background-color for #pic1, #pic2, #pic3 and #pic4, it works (but beats the purpuse).
What you're trying to achieve is probably better done with an image-map. It supports the onmouseover event, so you can use the same code for image swapping.
DOM nodes generally have to have some visible content or some IEs will not properly fire mouse events. One approach for making "dummy" mouse hover areas work with IE is to give them a 1% visible background color, which is not quite visible but IE will fire the events.
This rule should work in this case to stop IE from ignoring your mouse events:
#pic1, #pic2, #pic3, #pic4 {
background-color: #fff;
opacity: 0.01;
filter: alpha(opacity=01);
}
As for having the original text back on the screen, wouldn't you need to add another event? Currently it looks like you have something set up for "onmouseover" but nothing else.
Try this
Store the home page content in a JavaScript variable after the page reload;
<body onload="MM_preloadImages('images/re_ovr.gif','images/rev_ovr.gif','images/env_ovr.gif','images/contact_ovr.gif'); MM_storeHomePageText();">
Add a mouseout code to restore the original text;
<div id="pic1" onmouseover="MM_setTextOfLayer('homeText','','<h3>Linda Vista Redevelopment</h3>\n\n<p><img src="images/linda-vista.jpg" /></p>\n\n<p></p>')" onmouseout=MM_restoreHomePageText();> </div>
Please note the inside the Div, let us know this fixes your IE issue
var homePageText = '';
function MM_storeHomePageText() {
homePageText = document.getElementById('homeText').innerHTML;
}
function MM_restoreHomePageText() {
document.getElementById('homeText').innerHTML = homePageText;
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_setTextOfLayer(objId,x,newText) { //v9.0
with (document) if (getElementById && ((obj=getElementById(objId))!=null))
with (obj) innerHTML = unescape(newText);
}