1 / 13

Simplest Rollover ( nonJavaScript !)

Simplest Rollover ( nonJavaScript !). We’re going to change the image’s source when the event, “ onmouseover ” occurs: < img src = “pic.jpg” height = “250” width = “250” onmouseover = “ src = ‘pic2.jpg’”> Note the quotes!!

yered
Download Presentation

Simplest Rollover ( nonJavaScript !)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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).

More Related