Jump to content

mouseover


jnf555
 Share

Recommended Posts

hii have a gallery with thumbs and a large area where the img is displayed when i mouseover,how do i make it go back when i move away from the thumbthis is my code<script type="text/javascript">function showme(href){document.getElementById("largepic").src=href;return false;}</script><div class="largepicture"><img src="" alt="" width="495" height="370"id="largepic"></div><div class="thumb1 "><a href="./images/forest.jpg" onclick="return showme(this.href)" onmouseover="return showme(this.href)"><img src="./images/forest.jpg" alt="picture1" width="140" height="120" /></a><br/></div><div class="thumb1 "><a href="./images/garden.jpg" onclick="return showme(this.href)" onmouseover="return showme(this.href)"><img src="./images/garden.jpg" alt="picture1" width="140" height="120" /></a><br/></div>anyone help pleasejnf555

Link to comment
Share on other sites

It goes wherever you want it. If you want the image to disappear when they move the mouse away from the link, then put it on the link. If you want the image to disappear when the move the mouse away from the image, then put it on the image. Figure out what you want to happen and you should be able to identify where to put the event.

Link to comment
Share on other sites

It goes wherever you want it. If you want the image to disappear when they move the mouse away from the link, then put it on the link. If you want the image to disappear when the move the mouse away from the image, then put it on the image. Figure out what you want to happen and you should be able to identify where to put the event.
thanks for your helpjnf555
Link to comment
Share on other sites

<div class="thumb1 "><a href="./images/garden.jpg" onclick="return showme(this.href)" onmouseover="return showme(this.href)"onmouseout="()"><img src="./images/garden.jpg" "alt="picture1" width="140" height="120" /></a><br/></div>i have added onmouseout, but i am not sure what to put inside brackets.anyone help pleasejnf555

Link to comment
Share on other sites

I'm guessing you didn't write the showme function yourself and don't really understand how it works? I'm sure if we had known that from the beginning we would have given more appropriate answers.Is "largepic" an image before the mouseover event? If so, what is the original URL?

Link to comment
Share on other sites

I'm guessing you didn't write the showme function yourself and don't really understand how it works? I'm sure if we had known that from the beginning we would have given more appropriate answers.Is "largepic" an image before the mouseover event? If so, what is the original URL?
<script type="text/javascript">function showme(href){document.getElementById("specimen").src=href;return false;}</script><div class="largepicture"><img src="" alt="" width="495" height="370"id="specimen"></div><div class="thumb1 "><a href="./images/garden.jpg" onclick="return showme(this.href)" onmouseover="return showme(this.href)"onmouseout="()"><img src="./images/garden.jpg" "alt="picture1" width="100" height="80" /></a><br/></div>the original was specimen which i have know put back,thanks for your help. yes i am still learningjnf555
Link to comment
Share on other sites

Try adding this function to your script:function hideme(){document.getElementById("specimen").src = "";return false;}And change your HTML to look like this:<a href="./images/garden.jpg" onclick="return showme(this.href)" onmouseover="return showme(this.href)" onmouseout="return hideme()">There are more efficient ways to do all this, but since you're learning, we'll stick with what you know how to do already.

Link to comment
Share on other sites

Try adding this function to your script:function hideme(){document.getElementById("specimen").src = "";return false;}And change your HTML to look like this:<a href="./images/garden.jpg" onclick="return showme(this.href)" onmouseover="return showme(this.href)" onmouseout="return hideme()">There are more efficient ways to do all this, but since you're learning, we'll stick with what you know how to do already.
thanks a lot jnf555
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...