Web Development Workshop

1
Web Development Workshop

• Lecture 9
• More JavaScript
• Dhiya Al-Jumeily
• Room 742
• D.ALJUMEILY_at_Livjm.ac.uk

2
Images with JavaScript

• One of the main use of JavaScript is to add
  excitement to Web pages by animating graphics.
• You could make the image change as the mouse go
  over the image.
• JavaScript can also be used to create images that
  change automatically, and even make animated
  advertising banners that take the place of
  animated GIF files.

3
Creating Rollovers

• The idea is to replace the original image with
  another image every time the user moves the mouse
  over the image.

ltHTMLgt ltHEADgt ltTITLEgtA Simple Rolloverlt/TITLEgt lt/
HEADgt ltBODY BGCOLORWHITEgt ltA
HREF"next.html" onMouseover"document.AnyName.src
'images/Replacement Image.gif' onMouseout"docum
ent.AnyName.src'images/OriginalImage.gif'"gt ltIMG
SRC"images/OriginalImage.gif" WIDTH147
HEIGHT82 BORDER0 NAMEAnyName"gtlt/Agt lt/BODYgt lt/H
TMLgt
4
Creating More Effective Rollovers

• The replacement image has to be fetched from the
  server.
• JavaScript can be used to preload all the images
  into the browsers cache.
• When the user moves the mouse over an image, the
  script swaps out one variable containing an image
  for a second variable containing the replacement
  image.
• Make sure that all your GIF images are not
  transparent.
• Both the original and the replacement images need
  to have identical dimensions.

5
Example

• ltHTMLgt ltHEADgt ltTITLEgtA Simple Rolloverlt/TITLEgt
• ltSCRIPT LANGUAGEJAVASCRIPT TYPE"TEXT/JAVASCRIPT
  "gt
• lt!-- Hide script from old browsers
• if (document.images)
• originalImage new Image
• replacementImage new Image
• originalImage.src "images/
  originalImage.gif"
• replacementImage.src "images/
  replacementImage.gif
• else
• replacementImage ""
• originalImage ""
• document.AnyName ""
• // End hiding script from old browsers --gt
• lt/SCRIPTgt lt/HEADgt ltBODY BGCOLORWHITEgt
• ltA HREF"next.html" onMouseover"document.AnyName
  .srcreplacementImage.src" onMouseout"document.An
  yName.srcoriginalImage.src"gtltIMG
  SRC"images/originalImage.gif" WIDTH147
  HEIGHT82 BORDER0 NAMEAnyName"gtlt/Agt
• lt/BODYgtlt/HTMLgt

6
Multiple Images Changing a Single Rollover

• This can be useful when you have several images
  that you want to annotate.
• Rolling over each of the images would make for
  example the description of that image appear (The
  description itself is another image).
• Example
• ltHTMLgt ltHEADgt ltTITLEgtA Complex Rolloverlt/TITLEgt
• ltSCRIPT LANGUAGEJAVASCRIPT TYPE"TEXT/JAVASCRIPT
  "gt
• lt!-- Hide script from old browsers
• if (document.images)
• flyText new Image
• tankText new Image
• bgText new Image
• heliText new Image

7
Example (conts.)

• flyText.src "images/fmText.gif"
• tankText.src "images/tankText.gif"
• bgText.src "images/bg.gif"
• heliText.src "images/heliText.gif
• else
• flyText ""
• tankText ""
• bgText ""
• heliText ""
• document.textField "" // End hiding
  script from old browsers --gt
• lt/SCRIPTgtlt/HEADgt ltBODY BGCOLOR"EECC99"gt
• ltTABLEgt
• ltTR VALIGNTOPgt
• ltTDgt

8
Example (conts..)

• ltIMG SRC"images/leoText.gif" WIDTH375
  HEIGHT26gtltBRgt
• ltA HREF"flyPage.html" onMouseover"document.tex
  tField.srcflyText.src" onMouseout"document.textF
  ield.srcbgText.src"gtltIMG SRC"images/flyer.gif"
  WIDTH293 HEIGHT165 BORDER0 VSPACE20gtlt/AgtltBRgt
• ltA HREF"tankPage.html" onMouseover"document.te
  xtField.srctankText.src" onMouseout"document.tex
  tField.srcbgText.src"gtltIMG SRC"images/tanks.gif"
  WIDTH325 HEIGHT92 BORDER0gtlt/AgtltBRgt
• ltA HREF"heliPage.html" onMouseover"document.te
  xtField.srcheliText.src" onMouseout"document.tex
  tField.srcbgText.src"gtltIMG SRC"images/helicopter
  .gif" WIDTH224 HEIGHT160 BORDER0
  VSPACE20gtlt/Agt
• lt/TDgt ltTDgt
• ltIMG SRC"images/DaVinci.jpg" WIDTH144
  HEIGHT219 HSPACE50gtltBRgt
• ltIMG SRC"images/bg.gif" WIDTH208 HEIGHT27
  NAME"textField" VSPACE20gt
• lt/TDgt lt/TRgt
• lt/TABLEgt
• lt/BODYgt
• lt/HTMLgt

9
Using a function to simplify coding

• Repetitive tasks are perfect candidates for
  functions.
• Once you write the code that accomplishes the
  repetitive task, you just call the function, and
  pass it any data it needs to do its job.
• Example

ltHTMLgt ltHEADgt ltTITLEgtA Complex
Rolloverlt/TITLEgt ltSCRIPT LANGUAGEJAVASCRIPT
TYPE"TEXT/JAVASCRIPT"gt lt!-- Hide script from
old browsers if (document.images) flyText
new Image tankText new Image bgText new
Image heliText new Image
10
Example (conts)

• flyText.src "images/fmText.gif"
• tankText.src "images/tankText.gif"
• bgText.src "images/bg.gif"
• heliText.src "images/heliText.gif
• function chgImg(imgField,newImg)
• if (document.images)
• documentimgField.src eval(newImg ".src")
  
• // End hiding script from old browsers --gt
• lt/SCRIPTgt
• lt/HEADgt
• ltBODY BGCOLOR"EECC99"gt
• ltTABLEgt
• ltTR VALIGNTOPgt

11
Example (conts)

• ltTDgt
• ltIMG SRC"images/leoText.gif" WIDTH375
  HEIGHT26gtltBRgt
• ltA HREF"flyPage.html" onMouseover"chgImg('text
  Field','flyText')" onMouseout"chgImg('textField',
  'bgText')"gtltIMG SRC"images/flyer.gif" WIDTH293
  HEIGHT165 BORDER0 VSPACE20gtlt/AgtltBRgt
• ltA HREF"tankPage.html" onMouseover"chgImg('tex
  tField','tankText')" onMouseout"chgImg('textField
  ','bgText')"gtltIMG SRC"images/tanks.gif"
  WIDTH325 HEIGHT92 BORDER0gtlt/AgtltBRgt
• ltA HREF"heliPage.html" onMouseover"chgImg('tex
  tField','heliText')" onMouseout"chgImg('textField
  ','bgText')"gtltIMG SRC"images/helicopter.gif"
  WIDTH224 HEIGHT160 BORDER0 VSPACE20gtlt/Agt
  lt/TDgt
• ltTDgt
• ltIMG SRC"images/DaVinci.jpg" WIDTH144
  HEIGHT219 HSPACE50gtltBRgt
• ltIMG SRC"images/bg.gif" WIDTH208 HEIGHT27
  NAME"textField" VSPACE20gt
• lt/TDgt lt/TRgt lt/TABLEgt
• lt/BODYgt
• lt/HTMLgt

12
Creating Cycling Banners

• This can be used to cycle through a number of
  Gifs (either animated or not).
• Example
• ltHTMLgt
• ltHEADgt
• ltTITLEgtImage Arraylt/TITLEgt
• ltSCRIPT LANGUAGEJAVASCRIPT TYPE"TEXT/JAVASCRIPT
  "gt
• lt!-- Hide script from old browsers
• adImages new Array("images/banner1.gif","images
  /banner2.gif","images/banner3.gif")
• thisAd 0
• imgCt adImages.length

13
Example (conts..)

• function rotate()
• if (document.images)
• if (document.adBanner.complete)
• thisAd
• if (thisAd imgCt)
• thisAd 0
• document.adBanner.srcadImagesthisAd
• setTimeout("rotate()", 3 1000)
• // End hiding script from old browsers --gt
• lt/SCRIPTgtlt/HEADgt ltBODY BGCOLORWHITE
  onLoad"rotate()"gt ltCENTERgt
• ltIMG SRC"images/banner1.gif" WIDTH400
  HEIGHT75 NAME"adBanner"gt
• lt/CENTERgt
• lt/BODYgt
• lt/HTMLgt

14
Adding Links to Cycling Banners

• Banners are often used in advertising, and you
  will want to know how to make a banner into a
  link that will take a visitor clicks on the
  banner.
• Example
• ltHTMLgt
• ltHEADgt
• ltTITLEgtImage Arraylt/TITLEgt
• ltSCRIPT LANGUAGEJAVASCRIPT TYPE"TEXT/JAVASCRIPT
  "gt
• lt!-- Hide script from old browsers
• adImages new Array("images/banner1.gif","images
  /banner2.gif","images/banner3.gif")
• adURL new Array("negrino.com","sun.com","micros
  oft.com")
• thisAd 0
• imgCt adImages.length

15
Example (Conts)

• function rotate()
• if (document.images)
• if (document.adBanner.complete)
• thisAd
• if (thisAd imgCt)
• thisAd 0
• document.adBanner.srcadImagesthisAd
• setTimeout("rotate()", 3 1000)
• function newLocation()
• document.location.href "http//www."
  adURLthisAd
• // End hiding script from old browsers --gt
  lt/SCRIPTgtlt/HEADgt
• ltBODY BGCOLORWHITE onLoad"rotate()"gt
• ltCENTERgt ltA HREF"javascriptnewLocation()"gtltIMG
  SRC"images/banner1.gif" WIDTH400 HEIGHT75
  NAME"adBanner" BORDER0gtlt/Agt
• lt/CENTERgt
• lt/BODYgtlt/HTMLgt

16
Building Slide Shows

• Slide shows on Web sites present the user with an
  image, and let the user control the progression
  (either forward or backward) of the images.
• Example
• ltHTMLgt
• ltHEADgt
• ltTITLEgtImage Slideshowlt/TITLEgt
• ltSCRIPT LANGUAGEJAVASCRIPT TYPE"TEXT/JAVASCRIPT
  "gt
• lt!-- Hide script from old browsers
• myPix new Array("images/pathfinder.gif","images
  /surveyor.gif","images/surveyor98.gif")
• thisPic 0
• imgCt myPix.length - 1

17
Example (conts..)

• function processPrevious()
• if (document.images thisPic gt 0)
• thisPic--
• document.myPicture.srcmyPixthisPic
• function processNext()
• if (document.images thisPic lt imgCt)
• thisPic
• document.myPicture.srcmyPixthisPic
• // End hiding script from old browsers --gt
• lt/SCRIPTgt

18
Example (conts)

• lt/HEADgt
• ltBODY BGCOLORWHITEgt
• ltH1 ALIGNCENTERgtUS Missions to Mars
• ltPgtltIMG SRC"images/pathfinder.gif"
  NAME"myPicture" WIDTH201 HEIGHT155gt
• ltPgtltA HREF"javascriptprocessPrevious()"gtltlt
  Previouslt/Agt ltA HREF"javascriptprocessNext()"gtN
  ext gtgtlt/Agt
• lt/H1gt
• lt/BODYgt
• lt/HTMLgt

19
Combining a Rollover with an Image Map

• Combining rollovers with an image map can give
  you some interesting and attractive results
• Example
• ltHTMLgt
• ltHEADgt
• ltTITLEgtCombining rollovers image mapslt/TITLEgt
• ltSCRIPT LANGUAGEJAVASCRIPT TYPE"TEXT/JAVASCRIPT
  "gt
• lt!-- Hide script from old browsers
• if (document.images)
• img1 new Image
• img2 new Image
• img3 new Image
• imgRed new Image

20
Example (conts)

• img1.src "images/testGreen1.gif"
• img2.src "images/testGreen2.gif"
• img3.src "images/testGreen3.gif"
• imgRed.src "images/testRed.gif"
• else
• img1 ""
• img2 ""
• img3 ""
• imgRed ""
• document.roll ""
• // End hiding script from old browsers --gt
• lt/SCRIPTgt
• lt/HEADgt
• ltBODY BGCOLORWHITEgt
• ltMAP NAME"roll_map"gt

21
Automatically Changing Background colors

• We could change the color of the background by
  cycling through different colors with different
  timing.
• Example
• ltHTMLgt
• ltHEADgt
• ltTITLEgtImage Testlt/TITLEgt
• ltSCRIPT LANGUAGEJAVASCRIPT TYPE"TEXT/JAVASCRIPT
  "gt
• lt!-- Hide script from old browsers
• bGrounds new Array("red","white","blue")
• thisBG 0
• bgColorCount bGrounds.length

22
Example (conts)

• function rotateBG()
• if (document.images)
• thisBG
• if (thisBG bgColorCount)
• thisBG 0
• document.bgColorbGroundsthisBG
• setTimeout("rotateBG()", 3 1000)
• // End hiding script from old browsers --gt
• lt/SCRIPTgt lt/HEADgt ltBODY BGCOLORRED
  onLoad"rotateBG()"gt
• ltH1 ALIGNCENTERgtWelcome to Steve'sltBRgt
• Wacko Internet Conspiracy Page!lt/H1gt
• ltPgtltH3gtThe text could go in this section.lt/H3gt
• ltH1 ALIGNCENTERgtThe truth is in here.
  Somewhere.lt/H1gt lt/BODYgt lt/HTMLgt

23
Frames

• JavaScript makes frames even more powerful.
• A frame consists of at least three pages of HTML.
• The first called the frameset, sets up the
  dimensions of each of the child frames.
• The remainder of the pages fit into the panes
  that the framsets has created, and are the child
  pages.

24
Keeping a page out of frame

• Users can put one of your pages inside a frame on
  their site, making it appear that your page is
  part of their content.
• In JavaScript, windows appear in a hierarchy,
  with the parent window at the top of the heap.
• We can use JavaScript to Forcing your page to
  always be in a browser window.

25
Example

• ltHTMLgt
• ltHEADgt
• ltTITLEgtCan't be in a framelt/TITLEgt
• ltSCRIPT LANGUAGEJAVASCRIPT TYPE"TEXT/JAVASCRIPT
  "gt
• lt!-- Hide script from old browsers
• if (top.location ! self.location)
• top.location self.location
• // End hiding script from old browsers --gt
• lt/SCRIPTgt
• lt/HEADgt
• ltBODY BGCOLORWHITEgt
• ltH1gtA really important page here that everyone
  wants to steallt/H1gt
• lt/BODYgt
• lt/HTMLgt

26
Forcing a page into a Frame

• When a search engine find one of your pages, it
  doesnt know that the page is part of a frame,
  and your page will be shown as a single page, not
  the full framesets as you have designed it.
• JavaScript can be used to force the full frameset
  to display, even though some search engine
  doesnt know about frames.

27
Example

• ltHTMLgt
• ltHEADgt
• ltTITLEgtMust be in a framelt/TITLEgt
• ltSCRIPT LANGUAGEJAVASCRIPT TYPE"TEXT/JAVASCRIPT
  "gt
• lt!-- Hide script from old browsers
• if (top.location self.location)
• top.location.href "frameset2.html"
• // End hiding script from old browsers --gt
• lt/SCRIPTgt
• lt/HEADgt
• ltBODY BGCOLORWHITEgt
• ltH1gtA page that should always be within a
  framelt/H1gt
• lt/BODYgt
• lt/HTMLgt