Help on Hover-Over image change.

  • (2 Pages)
  • +
  • 1
  • 2

26 Replies - 72925 Views - Last Post: 17 January 2009 - 10:42 PM

#1 DeceitfulPillow   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 35
  • Joined: 22-June 08

Help on Hover-Over image change.

Posted 27 September 2008 - 10:24 PM

Alright, basically, in my navigation bar I have an image than I need to change to another image when you hover over it and the link. Well for some reason my code isn't working. Can someone help?

<a href="/home"><img src="image1.gif"
onmouseover="img src='image2.gif'"
onmouseout="img src='image1.gif'" />Home</a>

Is This A Good Question/Topic? 0
  • +

#3 Martyr2   User is offline

  • Programming Theoretician
  • member icon

Reputation: 5283
  • View blog
  • Posts: 14,104
  • Joined: 18-April 07

Re: Help on Hover-Over image change.

Posted 27 September 2008 - 10:53 PM

Simply change it to this...

<a href="/home"><img src="image1.gif"
onmouseover="this.src='image2.gif'"
onmouseout="this.src='image1.gif'" />Home</a>



This tells it to change the src property of "this" object. "This" should fix your problem... play on words intended. ;)

Good luck!
Was This Post Helpful? 1

#4 DeceitfulPillow   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 35
  • Joined: 22-June 08

Re: Help on Hover-Over image change.

Posted 27 September 2008 - 10:57 PM

Thank you, but is there a way to have it change, when I hover over the text as well?

Edit: There also seems to be a blue border around the image due to it being a link. How can I remove this?

This post has been edited by DeceitfulPillow: 27 September 2008 - 10:59 PM

Was This Post Helpful? 0
  • +
  • -

#6 Martyr2   User is offline

  • Programming Theoretician
  • member icon

Reputation: 5283
  • View blog
  • Posts: 14,104
  • Joined: 18-April 07

Re: Help on Hover-Over image change.

Posted 27 September 2008 - 11:08 PM

Get rid of the border by setting the property "border" equal to 0 in the image....

<a href="/home"><img src="image1.gif"
onmouseover="this.src='image2.gif'"
onmouseout="this.src='image1.gif'" border="0"/>Home</a>



As for the text to also change the image is going to take a bit more work since it is not the image itself. You can instead move the onmouseover and onmouseout to the <a> tag instead and give the picture a "UNIQUE" name in the form of an id.

<a href="/home" onmouseover="homepic.src='image2.gif'"
onmouseout="homepic.src='image1.gif'"><img src="image1.gif" border="0" id="homepic"/>Home</a>



Hope that works out for you. :)
Was This Post Helpful? 1

#7 DeceitfulPillow   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 35
  • Joined: 22-June 08

Re: Help on Hover-Over image change.

Posted 27 September 2008 - 11:13 PM

Sorry again but this time the image doesn't even show up. :(


EDIT: NVM you're a genius It works. THank you ;)

This post has been edited by DeceitfulPillow: 27 September 2008 - 11:15 PM

Was This Post Helpful? 0
  • +
  • -

#8 DeceitfulPillow   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 35
  • Joined: 22-June 08

Re: Help on Hover-Over image change.

Posted 27 September 2008 - 11:23 PM

Spoke too soon. Now, I'm not sure if there is a way to fix this but when you hover over the link, the image change works but the mouse and link start to spasm.
Was This Post Helpful? 0
  • +
  • -

#9 webmin   User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 256
  • Joined: 21-May 08

Re: Help on Hover-Over image change.

Posted 28 September 2008 - 08:11 AM

I like this concept, but I don't want to change the image I'm using, I just want to change the width and height onmouseover. Can I do this?

Thanks
Was This Post Helpful? 0
  • +
  • -

#10 BetaWar   User is offline

  • #include "soul.h"
  • member icon

Reputation: 1528
  • View blog
  • Posts: 8,314
  • Joined: 07-September 06

Re: Help on Hover-Over image change.

Posted 28 September 2008 - 08:26 AM

Yes, just use the different properties.

@Pillow - What browser are you using, it (Martyr's code) works fine in IE 7. I haven't tested on other browser ATP though.
Was This Post Helpful? 0
  • +
  • -

#11 webmin   User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 256
  • Joined: 21-May 08

Re: Help on Hover-Over image change.

Posted 28 September 2008 - 08:34 AM

Ok sorry but I'm not sure what you mean by different properties. This is what I've tried so far:
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="index.html" id="current"></a><img alt="" src="images/App1.png" width="128" height="128" /></a></li>
<li><a href="/forum" onmouseover="forums.src='images/Forum.png' width='128' height='128'"><img alt="" src="images/Forum.png" width="100" height="100" id="forums" /></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>



That doesn't seem to be working though
Was This Post Helpful? 0
  • +
  • -

#12 BetaWar   User is offline

  • #include "soul.h"
  • member icon

Reputation: 1528
  • View blog
  • Posts: 8,314
  • Joined: 07-September 06

Re: Help on Hover-Over image change.

Posted 28 September 2008 - 08:41 AM

@Mod - If we could split these topics I think that would be good, they are talking about the same general thing, but have totally different issues.

This is more that I meant:

<style>
  a{
	background: #eee;
	width: 100px;
	height: 20px;
  }
</style>

<a href="/forum" onmouseover="this.style.width='128'; this.style.height='128'">Test</a>


You are changing the CSS properties of the link on mouseover, which takes effect.

Notice - You need to have a semi-colon after each call for it to work correctly. Also, because it is treated as javascript (mostly because it is) it won't work on browsers that have javascript disabled.

Hope that helps.
Was This Post Helpful? 0
  • +
  • -

#13 webmin   User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 256
  • Joined: 21-May 08

Re: Help on Hover-Over image change.

Posted 28 September 2008 - 08:50 AM

still not working here's all the code for my index page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style>
a{
	width: 100px;
	height: 100px;
}
</style>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
<center>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="index.html" id="current"></a><img alt="" src="images/App1.png" width="128" height="128" /></a></li>
<li><a href="/forum" onmouseover="this.style.width='128' this.style.height='128'"><img alt="" src="images/Forum.png" width="100" height="100" id="forums" /></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
</center>
</body>

</html>


And here's the code in my css file:
#navcontainer
{
font-family: Arial,Sans-Serif;
margin: 0 auto;
width: 70%;
border-bottom: 1px solid #ddd;
}

#navlist
{
width: 60%;
text-align: center;
margin: 0 auto;
padding: 0;
text-indent: 0;
list-style-type: none;
}

#navlist li
{
padding: 0;
margin: 0;
text-indent: 0;
display: inline;
}

#navlist li a
{
letter-spacing: -1px;
text-decoration: none;
color: #ccc;
font-size: 1em;
padding: 0 2px;
border-top: .5em solid #eee;
}

#navlist li a:hover,#navlist a#current
{
/*color: #333;
border-top: none;
font-size: 1.5em;*/
}

#navlist a#current { color: #fc6; }


Was This Post Helpful? 0
  • +
  • -

#14 BetaWar   User is offline

  • #include "soul.h"
  • member icon

Reputation: 1528
  • View blog
  • Posts: 8,314
  • Joined: 07-September 06

Re: Help on Hover-Over image change.

Posted 28 September 2008 - 08:58 AM

All the code I gave you before does is increase the size of the link. What exactlty are you wanting it to do?
Was This Post Helpful? 0
  • +
  • -

#15 webmin   User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 256
  • Joined: 21-May 08

Re: Help on Hover-Over image change.

Posted 28 September 2008 - 09:00 AM

I want to use images as my links. So instead of having text, I want people to be able to point at the image for another page and make it larger before they click on it. Sort of like the Mac OSX dock bar at the bottom of the screen. As you hover over each of the shortcuts, they get bigger.

This post has been edited by webmin: 28 September 2008 - 09:02 AM

Was This Post Helpful? 0
  • +
  • -

#16 BetaWar   User is offline

  • #include "soul.h"
  • member icon

Reputation: 1528
  • View blog
  • Posts: 8,314
  • Joined: 07-September 06

Re: Help on Hover-Over image change.

Posted 28 September 2008 - 09:04 AM

Here, it should do what you are looking for:

<style>
  img{
	width: 20px;
	height: 20px;
  }
</style>

<a href="" onmouseover="home.style.width='100px'; home.style.height='100px'" onmouseout="home.style.width='20px'; home.style.height='20px'"><img src="" id="home"></a>


NOTE - I have set the CSS to work with all images, so you will likely want to change that to a single class it is modifying, or all your images will be VERY small. (20x20 pixels)

Hope that helps.
Was This Post Helpful? 0
  • +
  • -

#17 webmin   User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 256
  • Joined: 21-May 08

Re: Help on Hover-Over image change.

Posted 28 September 2008 - 09:48 AM

Sorry but it's still not working
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2