Download
simplest rollover nonjavascript n.
Skip this Video
Loading SlideShow in 5 Seconds..
Simplest Rollover ( nonJavaScript !) PowerPoint Presentation
Download Presentation
Simplest Rollover ( nonJavaScript !)

Simplest Rollover ( nonJavaScript !)

104 Vues Download Presentation
Télécharger la présentation

Simplest Rollover ( nonJavaScript !)

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Simplest Rollover (nonJavaScript!) • We’re going to change the image’s source when the event, “onmouseover” occurs: <imgsrc = “pic.jpg” height = “250” width = “250” onmouseover = “src = ‘pic2.jpg’”> • Note the quotes!! • What if we want to change the image back when the mouse pointer leaves the image? <imgsrc = “pic.jpg” height = “250” width = “250” onmouseover = “src = ‘pic2.jpg’” onmouseout = “src = ‘pic.jpg’”>

  2. Text Rollover (nonJavaScript!) • Text doesn’t have attributes (like onmouseover) • So we use an anchor tag (<a>) • The onmouseover attribute can change the src attribute of the <img> tag, so we need an image tag • And we need to identify an image tag explicitly using the “name” attribute • E.g., <img height = “100” width = “100” src = “pic3.jpg” name = “textrollover”> <a onmouseover = “document.textrollover.src = “pic4.jpg”><b>Text Rollover Example</b></a>

  3. document.images • The document.images object reflects the images on a web page. • This is basically an array of all the images in a document • each image is also an object of its own. • you can refer to an image in one of the following ways: document.images[i] // array notation document.images.imageName // property notation

  4. Document.images • Consider the following HTML definition: <IMG SRC="anything.gif" NAME="anything" HEIGHT="100" WIDTH="100"> • If this is the third image on the page, the following references reflect that image: document.images[2] // array notation document.images.anything // using the name document.anything // using the name (a shortcut) • Array notation drawback: If you change the number of images on the page, the index number of your images • In general, use the name.

  5. document.images.length • document.images.length • Returns the number of images on the page. • if there are 10 images on the page, • document.images.length evaluates to 10, • document.images[9] reflects the last image

  6. Browser Compatability (reminder) • Not all browsers support the document.images object. • only Navigator 3.0x, 4.0x, and IE 4.0x have rollovers. • To make sure the browser supports the document.images object : if (document.images) { … } • This statement determines whether or not the document.images object exists. • If the object does not exist document.images is null, so it evaluates to false • if an object is not null, it evaluates to true

  7. Creating an Image Object varvariableName = new Image(); • The following statement preloads the desired image: variableName.src = "imageURL.gif"; • The src property enables you to associate an actual image with an instance of the Image object.

  8. Creating a Rollover A rollover requires at least 2 images. For example, take a look at the following images: <IMG SRC="advann.gif" HEIGHT="24" WIDTH="120" NAME="advan"> <IMG SRC="advana.gif" HEIGHT="24" WIDTH="120" NAME="advan"> • Note that the active and inactive images in a rollover must both be the same size. • Otherwise, the active image is automatically adjusted to the size of the inactive image.

  9. Code for a rollover • To combine these two images into a rollover: if (document.images) { varadvanoff = new Image(); // for the inactive image advanoff.src = "advann.gif"; varadvanon = new Image(); // for the active image advanon.src = "advana.gif"; } function act() { if (document.images) { document.images.advan.src = advanon.src; } } function inact() { if (document.images) { document.images.advan.src = advanoff.src; } } • The corresponding HTML code for this rollover is: <A HREF="advantages.html" onMouseOver="act()" onMouseOut="inact()"> <IMG SRC="advann.gif" HEIGHT="24" WIDTH="120" NAME="advan" BORDER="0" ALT="Netscent Advantages"> </A>

  10. Several Rollovers • Now consider a "menu" consisting of several rollovers. • Use a standard naming scheme for the variables and image names. • For example: advan = the image name, advann = name of a variable • Rule of thumb: use a constant suffix for inactive images, and another one for the active images. function act(imgName) { if (document.images) { document.images[imgName].src = eval(imgName + "a.src"); } } function inact(imgName) { if (document.images) { document.images[imgName].src = eval(imgName + "n.src"); } } • The parameter, imgName, is used in two expressions: document.images[imgName].src // the instance imgName + "n.src" // the URL • the argument is a string. By wisely choosing the variables and image names for our rollovers, we can use two general functions to activate and inactivate any image in the document.

  11. In body: • <A HREF="home.html" onMouseOver="act('home')" onMouseOut="inact('home')"> • <IMG SRC="homen.gif" HEIGHT="24" WIDTH="120" NAME="home" BORDER="0" ALT="Home"></A><br> • <A HREF="advantages.html" onMouseOver="act('advan')" onMouseOut="inact('advan')"> • <IMG SRC="advann.gif" HEIGHT="24" WIDTH="120" NAME="advan" BORDER="0" ALT="Advantages"></A><br> • <A HREF="pack.html" onMouseOver="act('pack')" onMouseOut="inact('pack')"> • <IMG SRC="packn.gif" HEIGHT="24" WIDTH="120" NAME="pack" BORDER="0" ALT="Packages"></A><br> • <A HREF="hebrew.html" onMouseOver="act('hebrew')" onMouseOut="inact('hebrew')"> • <IMG SRC="hebrewn.gif" HEIGHT="24" WIDTH="120" NAME="hebrew" BORDER="0" ALT="Hebrew"></A><br> • Example: • first image is named “home” • Its onMouseOver event invokes act() with"home". • The same rule applies to the image's onMouseOut event handler. • Note: the variables are named homen and homea, for the inactive and active image (respectively). <SCRIPT LANGUAGE="JavaScript"> <!– if (document.images) { varhomen = new Image(); homen.src = "homen.gif"; varhomea = new Image(); homea.src = "homea.gif"; varadvann = new Image(); advann.src = "advann.gif"; varadvana = new Image(); advana.src = "advana.gif"; varpackn = new Image(); packn.src = "packn.gif"; varpacka = new Image(); packa.src = "packa.gif"; varhebrewn = new Image(); hebrewn.src = "hebrewn.gif"; varhebrewa = new Image(); hebrewa.src = "hebrewa.gif"; } function act(imgName) { if (document.images) { document.images[imgName].src = eval(imgName + "a.src"); } } function inact(imgName) { if (document.images) { document.images[imgName].src = eval(imgName + "n.src"); } } // --> </SCRIPT>

  12. Rollover that swaps 2 images function act(imgName) { if (document.images) { document.images[imgName].src = eval(imgName + "a.src"); document.images[“holder”].src = eval(imgName + “info.src”); } } function inact(imgName) { if (document.images) { document.images[imgName].src = eval(imgName + "n.src"); document.images[“holder”].src = “clear.gif”; } } if (document.images) { varhomen = new Image(); homen.src = "homen.gif"; varhomea = new Image(); homea.src = "homea.gif"; varadvann = new Image(); advann.src = "advann.gif"; varadvana = new Image(); advana.src = "advana.gif"; varpackn = new Image(); packn.src = "packn.gif"; varpacka = new Image(); packa.src = "packa.gif"; varhebrewn = new Image(); hebrewn.src = "hebrewn.gif"; varhebrewa = new Image(); hebrewa.src = "hebrewa.gif"; varhomeinfo = new Image(); homeinfo.src = “homeinfo.gif”; varadvaninfo = new Image(); advaninfo.src = “advantagesinfo.gif”; varpackinfo = new Image(); packinfo.src = “packagesinfo.gif”; varhebrewinfo = new Image(); hebrewinfo.src = “hebrewinfo.gif”; }

  13. In Body • In body: <A HREF="home.html" onMouseOver="act('home')" onMouseOut="inact('home')"> <IMG SRC="homen.gif" HEIGHT="24" WIDTH="120" NAME="home" BORDER="0" ALT="Home"></A><br> <A HREF="advantages.html" onMouseOver="act('advan')" onMouseOut="inact('advan')"> <IMG SRC="advann.gif" HEIGHT="24" WIDTH="120" NAME="advan" BORDER="0" ALT="Advantages"></A><br> <A HREF="pack.html" onMouseOver="act('pack')" onMouseOut="inact('pack')"> <IMG SRC="packn.gif" HEIGHT="24" WIDTH="120" NAME="pack" BORDER="0" ALT="Packages"></A><br> <A HREF="hebrew.html" onMouseOver="act('hebrew')" onMouseOut="inact('hebrew')"> <IMG SRC="hebrewn.gif" HEIGHT="24" WIDTH="120" NAME="hebrew" BORDER="0" ALT="Hebrew"></A><br> <IMG SRC = “clear.gif” Name = “holder” Height = “100” width = “100”> • Example: • first image is named “home” • Its onMouseOver event invokes act() with"home". • The same rule applies to the image's onMouseOut event handler. • Note: the variables are named homen and homea, for the inactive and active image (respectively).