Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Wanet Telecoms Ltd on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
alt mouseover
- Thread starter Bygbobbo
- Start date
elegidito
Programmer
- Jan 19, 2002
- 358
im not sure if theres a way to do that, but you can always fake it, with something like this:
hope it helps, if u have any questions just ask. "Those who dare to fail miserably can achieve greatly." - Robert F. Kennedy
So true..
Code:
<HTML>
<HEAD>
<script language='javascript'><!--
function showAlt(t)
{
altMessage = 'Message for the thing here';
div = document.getElementById('altDiv');
div.innerText = altMessage;
div.style.display = 'block';
div.style.left = t.offsetLeft + t.offsetWidth;
div.style.top = + t.offsetTop + t.offsetHeight;
}
//--></script>
</HEAD>
<BODY>
<img src='whatever.jpg' onMouseOver='showAlt(this)' style='border:1px solid black;' onMouseOut='altDiv.style.display = "none"'>
<div id='altDiv' style='position:absolute;left:0;top:0;display:none;border:1px solid black;padding:none;'>this is the alt div</div>
</BODY>
</HTML>So true..
- Thread starter
- #3
thanks for the head start... After a few aggrevating hours I came up with this which works very well.
<style>
#curs{cursor:hand}
#show {background-color:#ffff9c;}
</style>
<script language="JavaScript"><!--
function showAlt(element,divtag,instructions,altdivtag){
var height = 0;
div = document.getElementById(divtag);
if(element < 3){
height = (div.offsetTop/2) +70;
} else {
height = div.offsetTop/2;
}
altdiv = document.getElementById(altdivtag);
altdiv.innerHTML = '<div ID=show>'+instructions+'</div>';
altdiv.style.display = 'block';
altdiv.style.left = div.offsetLeft-200;
altdiv.style.width = 300;
altdiv.style.top = height;
}
//--></script>
<table align="center">
<tr>
<td>
<span id='altDiv1' style="position:relative"></span>
<img src="images/eyeglass.gif" ID=curs name="eyeglasses" onMouseOver="showAlt('1','altDiv1','Show this text1','inneraltDiv1');return true;" onMouseOut="inneraltDiv1.style.display = 'none'">
<span id='inneraltDiv1' style='position:absolute;left:0;top:0;display:none;border:1px solid black;padding:none;'></span>
</td>
</tr>
</table>
a bit more flexible. The code you gave kept on putting the box in the top left hand side. I lowered the box for the first 2 elements so the popup doesn't fall behind some select boxes.
)
<style>
#curs{cursor:hand}
#show {background-color:#ffff9c;}
</style>
<script language="JavaScript"><!--
function showAlt(element,divtag,instructions,altdivtag){
var height = 0;
div = document.getElementById(divtag);
if(element < 3){
height = (div.offsetTop/2) +70;
} else {
height = div.offsetTop/2;
}
altdiv = document.getElementById(altdivtag);
altdiv.innerHTML = '<div ID=show>'+instructions+'</div>';
altdiv.style.display = 'block';
altdiv.style.left = div.offsetLeft-200;
altdiv.style.width = 300;
altdiv.style.top = height;
}
//--></script>
<table align="center">
<tr>
<td>
<span id='altDiv1' style="position:relative"></span>
<img src="images/eyeglass.gif" ID=curs name="eyeglasses" onMouseOver="showAlt('1','altDiv1','Show this text1','inneraltDiv1');return true;" onMouseOut="inneraltDiv1.style.display = 'none'">
<span id='inneraltDiv1' style='position:absolute;left:0;top:0;display:none;border:1px solid black;padding:none;'></span>
</td>
</tr>
</table>
a bit more flexible. The code you gave kept on putting the box in the top left hand side. I lowered the box for the first 2 elements so the popup doesn't fall behind some select boxes.
)- Status
Similar threads
- Locked
- Question