Div tags visble and hidden

offroaderdan

Experts, I have a div tag i have assigned with 3 pictures in it. lets call it

now what i would like to happen is on mouse hover on a separate button this div tag is displayed (visible), and on mouse out it becomes invisible. Any ideas of how this can be done. I am sorry if this is a stupidly easy question to answer, i am use to coding in vb.net and thought i would have a go at a different language :) as in vb.net i wold do groupbox.visible=false. Thanks Dan

thatraja

function mousemove()
{
document.getElementById("divTest").style.visibility = "visible";
}

function mouseout()
{
document.getElementById("divTest").style.visibility = "hidden";
}

<div id="divTest">Test DIV Content</div>
<div>

</div>

Mate you should learn javascript must in web development. Happy coding

thatraja

Tips/Tricks|Brainbench certifications|Facebook|Twitter

NeverHeardOfMe

If you want your code to have better cross-browser compatibility, you should use something more like this: function mouseover() { document.getElementById("divTest").style.display = "inline"; } function mouseout() { document.getElementById("divTest").style.display = "none"; }

Test DIV Content

offroaderdan

Thanks, This works, however i have some button images i would like to use, i have tried as best to use your code and incorprate it into the image i am using but hit a brick wall. i used

but his code doesn't seem to be doing anything, unlike your code above. Any help would be great Cheers Dan

offroaderdan

OK i seem to be getting somewhere.......However, is there any way that i can change the background image of another button by pressing a particualr button. What i have is a button which when rolled over goes red, and clicked goes green ( ad should stay green!!) What i then want to do is only when a mouse click is on another button the orignal green button goes back to orginal and the clicked button becomes green. I have a rough idea of how to do it except but don't know if it would actually work :) Current code

<input type="image" onClick= "hideSK();hideRK();showFK();this.src='images/Main screen/Main buttons/Welcome.jpg';MM_callJS('roll')"

                onmouseover="this.src='images/Main screen/Main buttons/WelomeRed.jpg'" 
                onMouseOut="this.src='images/Main screen/Main buttons/Welcome.jpg'"
                value="Welcome" src="images/Main screen/Main buttons/Welcome.jpg" width="146" height="43"

I would then like to add a function which will change the previous buttons back to blue something like button.value="home".image scr= "home blue.jpg Thanks Dan