Mouseover image tooltip

[stebbi]

Hey

I´m new to js trying to have an image with mouseover effect and also a tooltip

 

I have combined to scripts here to try to get this effect maybe I´m way off but this is what I have so far ..its almost working but not well enough the tooltip appears in the top left and the mouseout dont work...Thanks for the help!

 

<div class="code"><script type="text/javascript">
function ShowText(id) {
document.getElementById(id).style.display = 'block';
}
function HideText(id) {
document.getElementById(id).style.display = 'none';
}
function replaceme(which,img) {
which.src = img;
}
function restoreme(which,img) {
which.src = img;
}

</script>

<style type="text/css">
<!--
.box {
background-color: #504D6F;
border: 1px solid #FFF;
height: 100px;
width: 200px;
padding: 5px;
}
-->
</style>

<span onmouseover="ShowText('answer1'); return false; replaceme(this,'images/on1.gif');" >
<img src="images/off1.gif" style="position:relative; left:200px; top:200px; width:20px; height:20px;"></span>
<span id="answer1" class="box" onMouseOut="HideText('answer1'); return false; restoreme(this,'images/off1.gif');" style="display:none;">text info</span></div>

[aseaofflames]

have you tried putting the onmouseout in the first span?

 

also:

restoreme(this,'images/off1.gif');"

 

the this would refers to the span object, not the img object.

 

the return false; is also misplaced, it should be the last statement in the onmouseover and onmouseout functions.

 

working code:

<div class="code"><script type="text/javascript">
function ShowText(id) {
document.getElementById(id).style.display = 'block';
}
function HideText(id) {
document.getElementById(id).style.display = 'none';
}
function replaceme(which,img) {
document.getElementById(which).src = img;
}
function restoreme(which,img) {
document.getElementById(which).src = img;
}

</script>

<style type="text/css">
<!--
.box {
background-color: #504D6F;
border: 1px solid #FFF;
height: 100px;
width: 200px;
padding: 5px;
}
-->
</style>
<span onmouseover="ShowText('answer1'); replaceme('img','images/on.gif'); return false;" onmouseout="HideText('answer1'); restoreme('img','images/off1.gif'); return false;" >
<img src="images/off1.gif" id="img" style="position:relative; left:200px; top:200px; width:200px; height:100px;"></span>
<span id="answer1" class="box" style="display:none;">text info</span></div>

</body>
</html>

Demo: http://www.reactionwebdesign.com/demos/singlepage/imagebox.html

 

for your second question, in order to change the position of the box, you must tweak the css ( try adding top, left)