mouseover not going back to original state and IE is not showing it at all_问答_开发者

mouseover not going back to original state and IE is not showing it at all

开发者 https://www.devze.com 2023-01-10 00:32 出处：网络

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

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?

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);
}

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.