Jump to content

Dreamweaver help


Rucke

Recommended Posts

I got a problem and I would really appreciate if someone could help me out with this.

 

So I'm making a web portfolio where I will put some of my work. I want to make a link of an image, and I know how to do that. The problem is that I want the image to change when I roll over it with the mouse. I was thinking of doing it in Flash first but decided not to since you can't get rid of the annoying background. The image I have created is just a simple text, the second one is when the text is blured, which would be when I roll over the image with the mouse.

 

So anyone know how to do this?

user posted image

 

 

Link to comment
Share on other sites

It is possible (and straightforward) to change the image src with javascript onmouseover, then change it back with the mouseout event:

 

<img src="origImage.png" onmouseover="this._origSrc=this.src;this.src='newImage.png'" onmouseout="this.src=this._origSrc">

 

And that's probably what a WYSIWYG editor would do for you. But it's really not a good choice and you'd be much better off with simple CSS and the :hover selector, e.g.:

 

<style type="text/css">#mylink {   width: 100px;   height: 100px;   background: url(startingimage.gif);}#mylink:hover {   background: url(hoverimage.gif);}</style>...<a id="mylink"></a>

 

(Or even better - use a sprite image and just move the background-position.)

Link to comment
Share on other sites

It is possible (and straightforward) to change the image src with javascript onmouseover, then change it back with the mouseout event:

 

<img src="origImage.png" onmouseover="this._origSrc=this.src;this.src='newImage.png'" onmouseout="this.src=this._origSrc">

 

And that's probably what a WYSIWYG editor would do for you. But it's really not a good choice and you'd be much better off with simple CSS and the :hover selector, e.g.:

 

<style type="text/css">#mylink {   width: 100px;   height: 100px;   background: url(startingimage.gif);}#mylink:hover {   background: url(hoverimage.gif);}</style>...<a id="mylink"></a>

 

(Or even better - use a sprite image and just move the background-position.)

Yeah I figured it out myself. Thanks anyway smile.gif

user posted image

 

 

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
  • 1 User Currently Viewing
    0 members, 0 Anonymous, 1 Guest

×
×
  • Create New...

Important Information

By using GTAForums.com, you agree to our Terms of Use and Privacy Policy.