8 Replies - 936 Views - Last Post: 06 March 2011 - 11:11 AM

#1 Codey09  Icon User is offline

  • D.I.C Head

Reputation: 7
  • View blog
  • Posts: 210
  • Joined: 20-August 09

Changing an img on mouseover on link text

Posted 06 March 2011 - 08:42 AM

I am trying to get an image to change when the onmouseover function on a text link.

My code is as follows:
Javascript
<script language="javascript" type="text/javascript">
function changeImage(image)
{
	document.getElementById('treatments').setAttribute('src','images/' + image + '.jpg');
}
</script>

HTML
<tr>
    <td><a href="holistic.html" onmouseover="changeImange(holistic)">Holistic Therapy</a></td>
  </tr>
<tr>
        <td><img id="treatments" src = "images/beauty.jpg" width="250" height="250" alt="Treatments" /></td>
      </tr>


I have seen this working on another site (http://jdstiles.com/java/hoverchangeimage.html#) but I cant seem to get it working.

What am I doing wrong?

Is This A Good Question/Topic? 0
  • +

Replies To: Changing an img on mouseover on link text

#2 kumaraj  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 3
  • View blog
  • Posts: 80
  • Joined: 12-February 09

Re: Changing an img on mouseover on link text

Posted 06 March 2011 - 09:40 AM

You have spelt image wrong!

You wrote Imange in your second piece of code!


<tr>
    <td><a href="holistic.html" onmouseover="changeIma    n                       ge(holistic)">Holistic Therapy</a></td>
  </tr>
<tr>
        <td><img id="treatments" src = "images/beauty.jpg" width="250" height="250" alt="Treatments" /></td>
      </tr>


This post has been edited by kumaraj: 06 March 2011 - 09:41 AM

Was This Post Helpful? 0
  • +
  • -

#3 Codey09  Icon User is offline

  • D.I.C Head

Reputation: 7
  • View blog
  • Posts: 210
  • Joined: 20-August 09

Re: Changing an img on mouseover on link text

Posted 06 March 2011 - 09:58 AM

doh, I have corrected the spelling mistake, but still dont work?
Was This Post Helpful? 0
  • +
  • -

#4 kumaraj  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 3
  • View blog
  • Posts: 80
  • Joined: 12-February 09

Re: Changing an img on mouseover on link text

Posted 06 March 2011 - 10:07 AM

Sorry I've been really stupid, I now see what's wrong. You need to have a # in you href attribute in your anchor tag:
<a href="#" onmouseover="changeImage(holistic)">Holistic Therapy</a>


This post has been edited by kumaraj: 06 March 2011 - 10:08 AM

Was This Post Helpful? 0
  • +
  • -

#5 Codey09  Icon User is offline

  • D.I.C Head

Reputation: 7
  • View blog
  • Posts: 210
  • Joined: 20-August 09

Re: Changing an img on mouseover on link text

Posted 06 March 2011 - 10:16 AM

ok so I cant have a proper link to the page as well?
What I wanted was when the user moves the mouse over the link for it to change the picture which will show what that link is and give them a choice to either go to that page or go to another link. If that makes sense.
Was This Post Helpful? 0
  • +
  • -

#6 kumaraj  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 3
  • View blog
  • Posts: 80
  • Joined: 12-February 09

Re: Changing an img on mouseover on link text

Posted 06 March 2011 - 10:27 AM

If you add another function to your jscript:

function goToImage(image)
{
window.location= image+'.html';
}



And then in your HTML:
<a href="#" onmouseover="changeImage(holistic)" onclick="goToImage(holistic)">Holistic therapy</a>



Hope that works
Was This Post Helpful? 0
  • +
  • -

#7 Codey09  Icon User is offline

  • D.I.C Head

Reputation: 7
  • View blog
  • Posts: 210
  • Joined: 20-August 09

Re: Changing an img on mouseover on link text

Posted 06 March 2011 - 10:35 AM

I must be doing something wrong, I have done exactly as you have suggested but it is still not working for me, the picture doesn't change and when I click on the link it doesn't go to the new page.
Was This Post Helpful? 0
  • +
  • -

#8 kumaraj  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 3
  • View blog
  • Posts: 80
  • Joined: 12-February 09

Re: Changing an img on mouseover on link text

Posted 06 March 2011 - 10:50 AM

This is starting to confuse me slightly, if you sent me the whole file, including your images I could have a look for you.
Was This Post Helpful? 0
  • +
  • -

#9 Codey09  Icon User is offline

  • D.I.C Head

Reputation: 7
  • View blog
  • Posts: 210
  • Joined: 20-August 09

Re: Changing an img on mouseover on link text

Posted 06 March 2011 - 11:11 AM

I have just tried copy + past the code from the website I intially found the code on, the only changes I made to that was how it made the image src and it worked apart from the onclick code, now that code is identical to what I have been using so why doesn't it work?
Is it because I have the image in a separate table than the link?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1