Roll Over Images With Javascript

	WebFirst Forum	Forum Threaded View

Welcome, Guest
Please Login or Register. Lost Password?

WebFirst Forum

Webmaster Support

Browser Side Scripting & Programming

Javascript and Ajax

Roll Over Images With Javascript (1 viewing) (1) Guest

Favoured: 0

TOPIC: Roll Over Images With Javascript

Forum Tools

#35

admin (Admin)

Admin

Posts: 19

Roll Over Images With Javascript 3 Years, 9 Months ago Karma: 6

Here is a very useful javascript for creating rollover images. In case you don't know what a rollover image is, it means you can show one image on the page and have it change to another image when someone mouses over it.

To perform this type of function, you have to place code in two places of your page and create an external javascript file. One piece of code within the <head></head> tags on the page and then use the code to call the script where ever you want it to show on the page. One good use may be for back and next buttons on your page like in galleries.

I would also like to point out that javascript should be put in external files whenever possible. It will reduce the total amount of code on a web page and will help keep your content closer to the top of the page. So let's get started with how the code looks.

This is what goes inside of your head tag (You should have other code within the head tag but I'm not going to list all of the tags, just what you need for the mouseover script). The code you put in your head tag is like a short-cut to the script in the external file that we're going to call "mouseover.js".

Code:

<head> 
<script language="JavaScript" type="text/javascript" src="mouseover.js"></script> 
</head>

The mouseover.js file should be placed in the "public_html" directory on your server. You can put it in a different folder but you will need to modify the "src="mouseover.js" code above to reflect the folder you put the js file in. This is the script for the "mouseover.js" file

Code:

if (document.images) { 
nexton = new Image(); 
nexton.src = "images/next-on.gif" 
nextoff = new Image(); 
nextoff.src = "images/next-off.gif" 
backon = new Image(); 
backon.src = "images/back-on.gif" 
backoff = new Image(); 
backoff.src = "images/back-off.gif"} 
function img_act(imgName) { 
if (document.images) { 
imgOn = eval(imgName + "on.src"); 
document [imgName].src = imgOn;}} 
function img_inact(imgName) { 
if (document.images) { 
imgOff = eval(imgName + "off.src"); 
document [imgName].src = imgOff;}}

NOTE: The script above is assuming you placed your images in a folder named "images" and you named the images "next-on.gif", "next-off.gif", "back-on.gif" and "back-off.gif" This is an example code you would place in the body of your webpage

Code:

<td align="left"> 
<A HREF="javascript:history.go(-1)" ONMOUSEOVER="img_act('back')" ONMOUSEOUT="img_inact('back')"><IMG NAME="back" BORDER="0" ALT="back" WIDTH="120" HEIGHT="55" SRC="images/back-off.gif"></a><br></td> 

<td align="right"> 
<A HREF="your-next-web-page.html" ONMOUSEOVER="img_act('next')" ONMOUSEOUT="img_inact('next')"><IMG NAME="next" BORDER="0" ALT="next" WIDTH="120" HEIGHT="55" SRC="images/next-off.gif"></a> 
<br></td>

I hope you find this example useful and if you want to see how it works before trying, here is a website that is using the script. Look at the bottom of the page and mouseover the next and back buttons. Mouseover Example

Report to moderator Logged

Logged

Last Edit: 2008/08/17 20:59 By admin.

WebFirstCreations Admin - Web Services

The administrator has disabled public write access.

Forum List

Browser Side Scripting & Programming

Javascript and Ajax

Our Local Marketing Area

Raleigh Web Design and Search Marketing Company

Contact us TODAY! Get a Free Web Design Quote or just Contact Us for more info about our seo, search marketing, web hosting, or any of our web services.

Alamance County, NC - Alamance, Altamahaw, Burlington, Elon, Gibsonville, Graham, Haw River, Liberty, Mebane, Saxapahaw, Snow Camp, Swepsonville

Bladen County, NC - Bladenboro, Bolton, Clarkton, Council, Dublin, Elizabethtown, Fayetteville, Garland, Harrells, Ivanhoe, Kelly, Riegelwood, Saint Pauls, Tar Heel, White Oak

Brunswick County, NC - Ash, Bolivia, Calabash, Leland, Longwood, Oak Island, Ocean Isle Beach, Riegelwood, Shallotte, Southport, Sunset Beach, Supply, Wilmington, Winnabow

Columbus County, NC - Bladenboro, Bolton, Brunswick, Cerro Gordo, Chadbourn, Clarendon, Clarkton, Delco, Evergreen, Fair Bluff, Hallsboro, Lake Waccamaw, Nakina, Riegelwood, Tabor City, Whiteville

Cumberland County, NC - Autryville, Cumberland, Dunn, Falcon, Fayetteville, Fort Bragg, Godwin, Hope Mills, Linden, Parkton, Roseboro, Saint Pauls, Spring Lake, Stedman, Wade

Durham County, NC - Bahama, Cary, Chapel Hill, Durham, Hillsborough, Morrisville, Raleigh, Rougemont

Forsyth County, NC - Belews Creek, Bethania, Clemmons, Germanton, Kernersville, King, Lewisville, Pfafftown, Rural Hall, Tobaccoville, Walkertown, Walnut Cove, Winston Salem

Franklin County, NC - Bunn, Castalia, Franklinton, Henderson, Louisburg, Wake Forest, Warrenton, Youngsville, Zebulon

Greene County, NC - Ayden, Farmville, Grifton, Hookerton, La Grange, Maury, Pikeville, Snow Hill, Stantonsburg, Walstonburg

Guilford County, NC - Browns Summit, Climax, Colfax, Elon, Gibsonville, High Point, Jamestown, Julian, Kernersville, Liberty, Mc Leansville, Oak Ridge, Pleasant Garden, Sedalia, Stokesdale, Summerfield, Whitsett, Greensboro

Harnett County, NC - Angier, Benson, Broadway, Buies Creek, Bunnlevel, Cameron, Coats, Dunn, Erwin, Fuquay Varina, Holly Springs, Kipling, Lillington, Linden, Mamers, Olivia, Sanford, Spring Lake, Willow Spring

Hoke County, NC - Raeford

Johnston County, NC - Angier, Benson, Clayton, Dunn, Four Oaks, Garner, Kenly, Micro, Middlesex, Newton Grove, Pine Level, Princeton, Selma, Smithfield, Wendell, Willow Spring, Wilsons Mills, Zebulon

Lee County, NC - Broadway, Cameron, Cumnock, Lemon Springs, Sanford

Moore County, NC - Aberdeen, Bennett, Biscoe, Cameron, Carthage, Eagle Springs, Highfalls, Hoffman, Jackson Springs, Lakeview, Pinebluff, Pinehurst, Robbins, Seagrove, Southern Pines, Star, Vass, West End

Nash County, NC - Bailey, Battleboro, Castalia, Elm City, Middlesex, Nashville, Red Oak, Rocky Mount, Sharpsburg, Sims, Spring Hope, Whitakers, Wilson, Zebulon

New Hanover County, NC - Carolina Beach, Castle Hayne, Kure Beach, Wilmington, Wrightsville Beach

Onslow County, NC - Beulaville, Camp Lejeune, Chinquapin, Holly Ridge, Hubert, Jacksonville, Maple Hill, Maysville, Mccutcheon Field, Midway Park, Richlands, Sneads Ferry, Stella, Swansboro, Tarawa Terrace

Orange County, NC - Carrboro, Cedar Grove, Chapel Hill, Efland, Hillsborough, Hurdle Mills, Mebane, Rougemont, Timberlake

Pitt County, NC - Ayden, Bellarthur, Bethel, Falkland, Farmville, Fountain, Greenville, Grifton, Grimesland, Robersonville, Seaboard, Simpson, Stokes, Vanceboro, Walstonburg, Washington, Winterville

Randolph County, NC - Asheboro, Cedar Falls, Climax, Denton, Franklinville, Julian, Liberty, Pleasant Garden, Ramseur, Randleman, Seagrove, Sophia, Staley, Thomasville, Trinity, Troy

Sampson County, NC - Autryville, Clinton, Dunn, Faison, Garland, Godwin, Harrells, Ivanhoe, Magnolia, Mount Olive, Newton Grove, Rose Hill, Roseboro, Salemburg, Turkey, Willard

Wake County, NC - Apex, Cary, Clayton, Creedmoor, Fuquay Varina, Garner, Holly Springs, Knightdale, Morrisville, New Hill, Raleigh

Wayne County, NC - Dudley, Four Oaks, Fremont, Goldsboro, Kenly, La Grange, Mount Olive, Pikeville, Princeton, Seven Springs, Stantonsburg

We are extensive Joomla Developers and can also provide custom web design services for all types of CMS (content management system) websites and shopping cart systems including Joomla / Virtuemart, WordPress, Prestashop, Magento, Flash Websites, and much more.