Question:

How do I get a mouseover attribute?

by | earlier

Ok so i have images as links on my site but i want a pawprint to go behind the links when someone mouses over it (i have the two images already). so how would i get the images to change? despite all i know about web design and HTML i dont know how to do this

Tags:

Report

Answer The Question I've Same Question Too

Follow Question

4 ANSWERS

Sort By: Date | Rating

<a href="yourpage.html" class="pawprint">Test pawprint link</a>

Create a css file or embed some CSS in <head>.

Put this in it:

a.pawprint:hover { background-image: url(pawprint.gif); }

You may need to position it a little to get it to the spot you want, but this is the basic format.
Report (0) (0) | earlier
If you mean you want the image to change when they hover the mouse over it, here's the basic HTML code:

<a href="URL"

onMouseOver="document.p.src='IMGSRC2';... onMouseOut="document.p.src='IMGSRC1;">

<img src="IMGSRC1" name="p" width="WIDTH" height="HEIGHT" border="0"></a>

EXAMPLE (from my own site):

<a href="listing.html"

onMouseOver="document.p.src='images/pg... onMouseOut="document.p.src='images/pg.gi...

<img src="images/pg.gif" name="p" width="111" height="36" border="0"></a><br>
Report (0) (0) | earlier
Use this as your image tag with your own images as the paths between the links:

<img src="image1.gif" onmouseover="this.src='image2.gif'" onmouseout="this.src='image1.gif'" alt="" />

Lot less code. For good effect, images should be same size, but don't have to be unless your container expands/contacts with different sizes on mouseover function.

Ron
Report (0) (0) | earlier
You need to use javascript. First write a function for the paw image and a function for the normal image.

function paw(name) {

document.name.src="paw.jpg";

}

function normal(name) {

document.name.src="normal.jpg";

}

Then call these functions with the name you assign to each image.

<img name="pic1" onmouseover="paw('pic1');" onmouseout="normal('pic1');" alt="blah" src="normal.jpg">

This is pretty rough and leaves out the <script... which I assume you know, but should give you the general idea.
Report (0) (0) | earlier