Want to know html rollover pictures effects code

Asked By Rachel Grifiths 20 points N/A Posted on - 08/29/2012

I have a gaming website. I want to bring some variation to my site by adding few rollover pictures here. For this I am searching for the html codes to add rollover effects to the pictures of my site. Please add the html rollover pictures effects code here or give the link where I can find the code.

• Status: Open
• Question Views: 937
• Answer Count: 2
• Vote Up 0 Vote Down

• Answer Accepted: Yes
• Question Category: .NET Programming

Best Answer by Kumay Edwards

Go To Solution

Answered By Niley Samilene 0 points N/A #144896

Want to know html rollover pictures effects code

Hi,  

You can add rollover effect you have to use java script.

There are lots of tutorial web sites on HTML coding.  You can go to web search for this.

I prefer w3school as a tutorial web site. You can learn many useful things from there.

I think this link will solve your problem:

 https://www.quackit.com/javascript/image_rollovers.cfm

Thanks.

About Niley Samilene

Questions
2

Answers
92

Best Answers
17

• Vote Up 0 Vote Down

• Posted on - 08/29/2012
• Question Category: .NET Programming

Best Answer

Best Answer

Answered By Kumay Edwards 5 points N/A #144898

Want to know html rollover pictures effects code

Hi there,

use following steps.

 

Start the word processor or any other editor to write code for rollover effect and then add the desired image and include it inside of the <CENTER> tag. After the image name, type NAME=“rollover”.

 

Type <A HREF=“?”> Before the <CENTER> tag. Replace the question mark with the address of the Web page that you wish to have appeared when a visitor clicks on the image. Type </A> after the image.

 

Verify code should look like

 

<A HREF=“pages.html”>

 

<CENTER><IMG SRC=“photo.jpg” NAME=“rollover”></CENTER>

</A>

 

Type ONMOUSEOVER=‘rollover.src=“?” ’ inside of the <A> tag. Replace the question mark with the location of the image that you want to be appear when a visitor moves the mouse over the original image.

 

Type ONMOUSEOUT=‘rollover.src=“?” ’ Replace the question mark with location of the image that was added in Step1.

 

Verify your code looks like

 

<A HREF=“pages.html” ONMOUSEOVER=‘rollover.src=“photo.jpg” ’

ONMOUSEOUT=‘rollover.src=“photo.jpg” ’>

<CENTER><IMG SRC=“photo.jpg” NAME=“rollover”></CENTER>

</A>

 

Open a new Web browser to verify that your Web page displays the image that you are using for your image rollover. Test your site and verify that visitors can move the mouse over the image and it will change to the image that you specified, like you have programmed!!

 

 

 

Hope it works!!

About Kumay Edwards

Questions
2

Answers
212

Best Answers
57

• Vote Up 0 Vote Down

• Posted on - 08/29/2012
• Question Category: .NET Programming