Mouse-Over Pics

While posting my WierdPHOTOS, I thought a visually striking way to show the contrast between the two pics would be a mouse-over feature where the pic turned into the stranger version of itself. It was surprisingly simple and requires this code:

<img src=”first img” onmouseover=”this.src=’2nd img'” onmouseout=”this.src=’first img'” />

1. use img src as usual with the first image you want displayed.

<img src=””

2. Follow this with “onmouseover=”this.src=’2nd img'” this looks like

<img src=”” onmouseover=”this.src=’'”

3. Finish it up with “onmouseout=”this.src=’first img'” />” and your done.

<img src=”” onmouseover=”this.src=’'” onmouseout=”this.src=’'”


-tyler allen

~ by allentyler2991 on January 21, 2013.

3 Responses to “Mouse-Over Pics”

  1. This mouseover tutorial seems pretty simple and easy to follow. It’s really concise–gets right to the point. Stylistically, the post could use a quick conclusion, but as a DIY tutorial, it definitely seems effective. Of course, I’ll need to test it out on my own to see if I come across any issues when putting it into action or if it really is that simple! From what I read, though, it seems like a pretty easy way to add a little flair to your website.

    — Mallory Horn

  2. best info
    -Paul Pezzimenti

  3. This one has the best information because this is actually something that I’m very likely to end up using!

    – Melissa

Comments are closed.

%d bloggers like this: