Member Avatar for thebluestar

I don't know how to use the onmouseover event the text , then display the image.
For example, I have a <p onmousever="">CHECK</p>, then when I move the mouse over the text, the image will display.
Please help me!

  • 4 Contributors
  • 3 Replies
  • 2K Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by AMADH

Recommended Answers

All 3 Replies

Member Avatar for Pawan Tolia

I don't know how to use the onmouseover event the text , then display the image.
For example, I have a <p onmousever="">CHECK</p>, then when I move the mouse over the text, the image will display.
Please help me!

you must try this example ...will surely help you understanding the concept of onmouseover
<html>
<head>
<script type="text/javascript">
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt;
}
</script>
</head>

<body>
<img src ="planets.gif" width ="145" height ="126" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
<area shape ="rect" coords ="0,0,82,126"
onMouseOver="writeText('The Sun and the gas giant planets like Jupiter are by far the largest objects in our Solar System.')"
href ="sun.htm" target ="_blank" alt="Sun" />

<area shape ="circle" coords ="90,58,3"
onMouseOver="writeText('The planet Mercury is very difficult to study from the Earth because it is always so close to the Sun.')"
href ="mercur.htm" target ="_blank" alt="Mercury" />

<area shape ="circle" coords ="124,58,8"
onMouseOver="writeText('Until the 1960s, Venus was often considered a twin sister to the Earth because Venus is the nearest planet to us, and because the two planets seem to share many characteristics.')"
href ="venus.htm" target ="_blank" alt="Venus" />
</map>

<p id="desc"></p>

</body>
</html>

Member Avatar for Graphix

It really requires little work:

<script type="text/javascript">
function show(Id) {
document.getElementById(Id).style.display="inline";
}
</script>
<span onmouseover="show('myImage')">Hover here to see the image!!!</span>
<img src="someImage.jpg" id="myImage" border="0" style="display:none;" />

~G

Edited by Graphix because: n/a
Member Avatar for AMADH

Hello,

I am looking for something similar, and this is a good starting point. My quesion is how can I integrate this into php? so if I have a list of users all listed as


$first_name, $last_name, $department and $email

How can I have the mouseover be activated if you mouseover $first_name using php?

Thanks,

Aaron

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.