Skip Navigation | Groups

This site uses cookies- for more information see the Cookie Policy | Continue

Tags

Graphics

2009082101 Email to Ronx
 

Remote image rollovers

How to swap remote images


How to swap remote images.

This is an alternative method to that described in Remote Rollover Images . This example is much more flexible, allowing for multiple images of varying sizes.

This exercise places the source images (the thumbnails that are acted on by the mouse) in a paragraph (<p>...</p>) contained in a <div>, with the affected images in a <div> above them. This <div> can be placed anywhere in the page. CSS is used to space and centre the thumbnails, and to centre the large image. The effect is a small picture gallery.

  1. Make a new page- File->New
  2. Change to Split View - this is so that the code can be checked as you go.
  3. Save the page using the required page name and set the page title in the Save dialogue. Saving now makes linking to images less confusing later - the URLs will be relative rather than absolute.
  4. In the blank page design pane, hit Enter key twice to create two paragraphs. The first is for the large images, the second for the thumbnails.
  5. Create the <div> for the large image:
    • Move the cursor back into the first new paragraph - code view will show the position of the cursor, as will the design pane.
    • If the Quick Tag selector (QTS) is not showing, use View->Quick Tag Selector to show the QTS.
    • In the QTS right click the <p> and choose Wrap Tag from the context menu.
    • In the Quick Tag Editor box type between the angle brackets to form:
      <div id="disp">
    • Click the green Tick to close the editor
    • The code pane now shows:
      <body>
      <div id="disp">
      <p>&nbsp;</p>
      </div>
      <p>&nbsp;</p>
      </body>
      
  6. Now prepare for the thumbnails:
    • Move the cursor into the second new paragraph created in step 3
    • Again, use the QTS to wrap the <p> with a <div>.
    • In the QTS right click the <p> and choose Wrap Tag from the context menu.
    • In the Quick Tag Editor box type between the angle brackets to form:
      <div id="thumbs">
    • Click the green Tick to close the editor
    • The code pane now shows:
      <body>
      <div id="disp">
      <p>&nbsp;</p>
      </div>
      <div id="thumbs">
      <p>&nbsp;</p>
      </div>
      </body>
      
  7. Add the CSS. In FrontPage adding CSS can only be done in Code View, except for inline styles which can become a problem when editing. This example places the CSS in the <head> section of the page using Code View. Expression Web users can use the style management tools to create the styles.
    • In the code pane find the </head> tag and just before it add the CSS. When finished the relevant part of code view will resemble:
      <style type="text/css">
      #disp {margin:10px; height:400px; overflow:auto; }
      #thumbs p {padding:10px; text-align:center; border:2px solid red;}
      #thumbs img {border:none; margin:0 5px; vertical-align:bottom;}
      </style>
      </head>
      
    • Click in the design pane to update it. Note that the area for thumbnails has now gained a red border.
  8. Add the javascript. This example uses one javascript function that loads a large image into the display area - the <div> with id="disp". The CSS inserted gives this area a height of 400px - this can be changed to any other height to suit the images, or allowed to self adjust. However, self-adjustment will mean the  page below the large image will jump around as different sized images are displayed.
    • Again, in the Code pane, find the </head> pane and add the Javascript. The code will now resemble:
      <script type="text/javascript">
      /*<![CDATA[[*/
      function doFill(imgnme,wd,ht,altxt) {
      var inhtml;
      inhtml = '<img alt="' + altxt + '" src="' + imgnme + '"'
      inhtml = inhtml + ' width="' + wd + '"'
      inhtml = inhtml + ' height="' + ht + '" />'
      document.getElementById("disp").innerHTML=inhtml;
      }
      /*]]>*/
      </script>
      </head>
      
  9. Insert the thumbnails into the page:
    • The thumbnail images should have already been imported into the web site.
    • In the folder list, browse to the folder containg the thumbnails.
    • Drag the thumbnails into the paragraph designated for the paragraphs. The thumbnails will be automatically centred in the bordered area, with a small gap between them. The gap can be adjusted by changing the margin setting in the CSS.
      For example, change margin:0 5px; to margin:0 10px; to double the gap between the images. The "0" refers to the top and bottom margin for the images.
  10. To set up the onmouseover events for the large images - for each thumbnail:
    • Click on the thumbnail to select it, then click the hyperlink button in the toolbar (or type Ctrl+K) to bring up the Hyperlink dialogue
    • Use the dialogue to browse to the associated large image.
    • Click Target Frame button, and choose New Window, then click OK
    • Click OK
    • In the QTS, right click on the <a> tag and choose Edit Tag
    • Add inside the tag:
      onmouseover="doFill('imagename',width,height,'alt text')
      where imagename is the path and name of the large image, width and height are the width and height of the large image, and alt text is the alternative text to display for users when images cannot be displayed. An example for the complete tag, as seen in Code View is:
      <a href="images/anglia-2.jpg" target="_blank" onmouseover="doFill('images/anglia-2.jpg',401,274,'Ford Anglia, 1953')"><img alt="" height="68" src="images/_tnails/anglia_2_small.jpg" width="100" /></a>
  11. Double click on each thumbnail image, and set the alt text for the images.
  12. Save the page. 
  13. A page showing the working gallery is here. A further example, where the display <div> does not have a height attribute, is here.