Forum Moderators: open
Since the rollovers are working until the page finishes loading, I'm sure there must be an easy fix. ;-)
Here is part of the HTML, starting at the javascript (line 13 is bolded)
<script language="javascript">
currentLayer=0;
function showOverLay(layer){
if(currentLayer!=0){
document.getElementById(currentLayer).style.visibility="hidden";
}
document.getElementById(layer).style.visibility="visible";
//currentLayer=layer;
}
function hideOverLay(layer){
document.getElementById(layer).style.visibility="hidden";
}
</script>
<!--external style sheets and javascripts the suckerfish.js is causing an error on ie-->
<script src="global/dsd_suckerfish.js" type="text/javascript" language="Javascript"></script>
<script src="global/ieFix.js" type="text/javascript"></script>
<link href="global/dsd_home.css" rel="stylesheet" type="text/css" media="screen" />
<link href="global/dsd_special.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">
</style>
<link href="dsd_home.css" rel="stylesheet" type="text/css" />
<link href="dsd_special.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="allstuff">
<!--header.js -->
<script src="global/header.js" type="text/javascript"></script>
<!-- CONTENT box-->
<div id="contentsplashwrap">
<div class="contentsplash">
<div id="box1" onmouseover="showOverLay('box1over')">
<img src="images/A1.jpg" width="164" height="164" /></div>
<div id="box1over" onmouseout="hideOverLay('box1over')">
<img src="images/e_A1.jpg" /></div>
<div id="box2" onmouseover="showOverLay('box2over')">
<img src="images/A2.jpg" /></div>
<div id="box2over" onmouseout="hideOverLay('box2over')">
<img src="images/e_A2.jpg" /></div>
--etc--
and the style sheet is attached. part of it follows:
#contentsplashwrap {
top:125px;
position:absolute;
left: 0px;
margin-left: 0px;
background-color: #B5C457;
display: block;
width: 731px;
height: 542px;
}
.contentsplash {
top:0px;
position:absolute;
left: 0px;
margin-left: 0px;
width: 389px;
z-index:2;
}
.contentsplash #box1{
width:164px;
height:164px;
z-index:2;
left: 0px;
top: 0px;
}
.contentsplash #box1over{
position:absolute;
top:0px;
z-index:10;
visibility:hidden;
left: 0px;
}
.contentsplash #box2{
position:absolute;
top:0px;
left:189px;
width:164px;
height:164px;
z-index:2;
}
.contentsplash #box2over{
position:absolute;
top:0px;
left:189px;;
z-index:10;
visibility:hidden;
}
--etc--
Any ideas to fix this? Thank you
Do I have to go back and redo this page as sliced image rollovers in a table, (which will take more time, and won't be CSS and will be much more difficult to change pictures in the future (I'll have to re-slice the images again) and besides, that is the OLD way of page layout :(
Any help would be greatly appreciated, before I invest (unbillable) time to redoing as slices in a table.
Thank you!
Why don't you use one object and just swap out the src for that object?
<div id="box1"><a href="#" onmouseover="swapImage('this_img_id','over_state_img.jpg');" onmouseout="swapImage('this_img_id','out_state_img.jpg');"><img src="out_state_img.jpg" id="this_img_id"></a></div>
Second, it's probably not working in IE6 because you're doing the mouse over/out on the div:
<div id="box1" onmouseover="showOverLay('box1over')">box 1 image</div>
Use the natural event object, the anchor, to do mouse over/out/click events. Try this:
<div id="box1"><a href="#" onmouseover="showOverLay('box1over')">box 1 image</a></div>
You'll have to change the coding and styles a bit. Sorry to not be of more help, pasted your code in and got it to work but having trouble seeing the actual task.
The actual task is this: on a grid of 12 pictures - 4 across, 3 down,
As you roll over a box, the image changes - and also changes size - it might cover 2 boxes vertically, or 2 boxes horizontally. The images do not link to anything, it is just an interactive excercise.
I used CSS so that I could absolutely position the pics.
I added an <a href="#" to each event, and closed off each div so the event was not happening to the div, as you suggested.
Worked perfectly. Easy as pie.
Thank you Thank you!
Yesterday evening, while showing the site to the Big Important Person, neither Tester nor B.I.P. could get rollovers or menu to work!
Couldn't be a cache problem because Tester had no problem in the afternoon, but still, nothing worked in the evening.
B.I.P. had no cache, was visiting for the first time.
This morning, Tester typed in the address fresh in the URL bar (didn't grab it from a cached list), and everything worked fine.(!)
Tester said that B.I.P. used a link that Tester had sent in an email, instead of typing it in the URL bar. (links have no cache, though; that couldn't make a difference, right?)
What would make it work, then not work, then work? (remember, this is only in IE on PCs - Mac works fine)
I don't even know what questions to ask... (but I'm going to add a text links menu across the bottom of each page - something I didn't get a chance to do, yet, just in case the menu stops working again...)
Thanks for any insight...
PS: They are going to look at it again at 4:00 this afternoon...
