New Div onmouseover help.

[nano]

Hey,

 

I am not sure if you guys are familiar with the BBC iPlayer website, if a user hovers over the image, a new transparent div is created - showing how many days left etc.

 

I wanted to create a similar feature for a console games online store I am attempting to make. I have created what I believe to be a successful onmouseover command, but it doesnt seem to do the job fully.

 

example:

 

index.php

 

<div id="top_sellers_col1">
<div id="ts_over_col1" style="visibility: hidden;">£32.99<br />RRP: £600<br />Save: A lot!</div>
<a href="#" onmouseover="visVisible('ts_over_col1')" onmouseout="visHidden('ts_over_col1')">
<img src="bully.jpg" width="117px" height="178px" alt="Bully" class="col_img" />
<div id="col_info">Bully: Scholarship Edition<br />(Xbox 360)</div>
</a></div>

 

body.css (ts_over_col1)

 

#ts_over_col1 {
position: absolute;
top: 3px;
left: 9px;
width: 117px;
height: 140px;
background: #000;
filter:alpha(opacity: 60);
opacity: 0.60;
-moz-opacity: 0.60;
color: #fff;
z-index: 100;
font-weight: bold;
}

 

javascript source

 

function layerSetup(id,visibility){
if(document.getElementById){
this.obj = document.getElementById(id).style;
this.obj.visibility = visibility;
return this.obj;}
else if(document.all){
this.obj = document.all[id].style;
this.obj.visibility = visibility;
return this.obj;}
else if(document.layers){
this.obj = document.layers[id];
this.obj.visibility = visibility;
return this.obj;}
}
function visVisible(param){
new layerSetup(param,'visible');
}
function visHidden(param){
new layerSetup(param,'hidden');
}

 

The script was taken from tutorials dotted around. The reason it is not working the way I would like is, if you hover your mouse over the new created div, you have to keep the mouse absolutely still, as a slight movement will mean the div will not show again.

 

I am sorry for the description, its rather hard to explain. Like on the BBC iPlayer site, if you hover, you can move the mouse all over the new hover div (created over the image) and it will not move. If you hover over my created div, it will be visible and hidden every time the mouse is moved.

 

Once again sorry for the poor explanation, any help would be appreciated.

 

Cheers.

 

 

[devstudio]

It's late, I will simply present another method.

 

index.php

<div id="top_sellers_col1" onMouseOver="document.getElementById('ts_over_col1').style.display='block'" onMouseOut="document.getElementById('ts_over_col1').style.display='none">
<div id="ts_over_col1" class="dd-hidden">£32.99<br />RRP: £600<br />Save: A lot!
<a href="javascript:void(0);">
<img src="bully.jpg" width="117px" height="178px" alt="Bully" class="col_img" />
<div id="col_info">Bully: Scholarship Edition<br />(Xbox 360)</div>
</a></div>

 

body.css (relevant data)

#col_info {
        /* You will want to change this styling */
z-index:1000;
clear:both;
margin:0;
padding:0;
font: 16px/28px arial;
font-weight:bold;
padding-top:5px;
position: absolute;
}

.dd-shown {
display:block;
}

.dd-hidden {
display:none;
}

 

All of that should parse.  I am off to bed, if you need more help... I will check in the morning.

 

P.S.  Looks like your original code had an extra div in there near "Save a Lot!" -- That may have been your problem all along.

 

Best, Nathan

[nano]

Yes perfect. Thanks Nathan.

 

Though as you were half asleep you did miss the closing single quote on

 

style.display='none"

 

and the closing div by save a lot! was closing the div id="ts_over_col1"

 

but I wont hold it against you

 

Thanks again. Worked a treat!

[devstudio]

My apologies for the oversights.

 

Happy it is working for you! Best, Nathan