Skip Navigation | Groups

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

Tags

Graphics

2008073103 Email to Ronx
 

Pop-up images on the page

Using layers to display large images from thumbnails


This article describes a page with the thumbnails aligned vertically against the left margin, with text filling the rest of the page. The large images overlay the text when the thumbnails are hovered over. In this example all the large images display in the same place on the page.

Since this method involves the swapping of images it is important that the images are the same size, or they may be distorted - all the images will use the same width and height attributes. If the images have the same width (or height) the height (or width) attribute can be removed from the code for the placeholder image, the other attribute will be used from the image itself. FrontPage and Expression Web make it difficult to remove both width and height attributes.

Note that the Behaviours used here were designed to work with older browsers - up to IE 6 but including Netscape 4 which uses the (now obsolete) <layer> tag. They may work with present day browsers, but some code used is bloated, some is deprecated in today's browsers, and may fail completely in tomorrow's.

  • First, prepare the work surface.
    • Open the website - File->Open Site and open the website.
    • Open the page to be edited, or create a new page.
    • Make sure the Quick Tag Selector is showing in Design view at the top of the Design Pane or Split View Pane -   View->Quick Tag Selector
    • Select Split View from the tabs at the bottom of the Design or Editing  Pane
  • First add the page text content: 
    • Type in the first paragraph.
    • In the Quick Tag Select bar click on the <p> tag, then click the down arrow that appears and select Wrap Tag from the menu.
    • Type in: <div style="margin-left:160px;"> and click the green checkmark. This places the text for the page inside a container with a 160px left margin - the thumbnails go to the left of this.
    • Place the curser at the end of that paragraph, press Enter key and continue with the page content.
  • Now set up the page layout for the content and thumbnails.
    • On the Quick Tag Selector, click the <div> surrounding the page content, click the down arrow and select Wrap Tag
    • Type in <div style="position: relative;"> and tick the green checkmark. This places the floated <div> with all the thumbnails in a relatively positioned container. Now any layers that are added in the container (to show the large images) will always appear on the page in the same place, regardless of the browser size or text size settings the user has. The position of the large image will also stay the same relative to the thumbnails if more content is added to the page before the thumbnails.
    • In the code pane, the code will be similar to (starting with the <body> tag):
      <body>
      <div style="position: relative;">
      <div style="margin-left: 160px;">
    • Change this to:
      <body>
      <div style="position: relative;">
      <div style="float: left; width:150px;>xxxx</div>
      <div style="margin-left: 160px;">
      This adds a floated container for the thumbnails. This container will be against the left margin of the page, and just wide enough for the images - in this article the thumbnails are set to 150px wide. The xxxx characters make the div easy to select in the design pane.
    • Click on the design pane to update the layout.
  • Add thumbnails to the page.
    1. Import the large images into the website.
    2. Use Tools->Page Options (FP2003) or Tools->Page Editor Options Expression Web) and select the AutoThumbnail tab. Check that thumbnails will be generated with a width of 150px. Close the dialogue.
    3. Drag the first image onto the page (into the Design Pane) from a folder in the website, place it next to the xxxx inserted above. The image will overlay the page content already in the page - don't worry!  Now delete the xxxx.
    4. Click on the image, and convert to a thumbnail. Either use the autothumbnail button in the Pictures toolbar, or type Ctrl+T from the keyboard to produce the thumbnail.
    5. Use the right arrow key to move the curser to the right of the image, and type Shift+Enter to produce a line break ( <br> or <br /> in the code).
    6. Drag the next image onto the page, and repeat steps 3 and 4. The new image should be inside the floated <div>.
    7. Repeat step 6 for each further image to be used.
  • Create a layer to display the large image:
    • Click on the first thumbnail image, and use the left arrow key to move the curser to its  left.
    • On the menu, use Insert->Layer (FrontPage 2003) or Insert->HTML->Layer (Expression Web) to place an empty layer on the page. This will have to be moved in Code View to be inside the relatively positioned <div>, but outside the <div> containing the thumbnails.
    • An empty layer will be created bounded by a blue box (very thin borders in Expression Web)
    • In the Quick Tag Select bar, click on <div#layer1> (FrontPage) or <div#layer1.style1> (Expression Web) to highlight the code for the layer in the Code Pane.
    • Drag the code to just after <div style="position: relative;">, so code view looks like:
      <body>
      <div style="position: relative;">
      <div id="layer1" class="style1"></div>
      <div style="float: left; width: 150px;">
      
       This ensures the layer will stay where it is supposed to be.
    • Move the layer into its correct position on the page (remember its contents will obscure the text already there when the thumbnails are activated) and change its size to accommodate the largest image to be displayed from the thumbnails.
    • Click inside the layer to make it editable.
    • Drag a large image from the website into the layer. This will be a place holder for all the large images.
    • Click on the image to select it and highlight the code in the code pane.
    • Delete the height attribute from the image tag.
  • Now set up the behaviours to make it all work:
    • Open the Behaviours Task Pane
    • Click on the first image
    • On the Quick Tag Select  bar click the <a> tag
    • On the Behaviours task panel, click insert, and choose Swap Image
    • From the list, highlight the large image to swap out
    • For the Swap image URL, browse to the large image corresponding to the thumbnail.
    • Click OK twice.
    • Again, on the Behaviours task panel, click insert and choose Change Property
    • Select the Select Element radio, and choose the layer from the dropdown list (this will be a <div> with id  layer1
    • Click the Visibility button, and choose Visible from the choices.
    • Click OK
    • Tick the restore on mouseout event box, and click OK.
    • On the Behaviours task pane, change onclick  to  onmouseover. (mouseover onclick and use the dropdown to change.)
    • Repeat for all thumbnails.
  • Open the Layers task pane (use the drop down at the top of the Behaviours task pane in FrontPage) and select Layer1
  • Repeatedly click in the column under the eye until a closed eye appears. This sets the layer to be invisible until the thumbnails are moused over.
  • With Expression Web the layer will have a style class reference of style1. This can (if a lot of styles are produced in Expression Web, make maintenance difficult a year later (when the page construction is forgotten), so in code view delete the class="style1" from the layer div tag, and change the style definition in the page <head> section from .style1 to #layer1.
    Change <div id="layer1" class="style1"> to <div id="layer1"> and in the <style..> block in the <head> section, change .style1 {position: absolute;  to #layer1 {position: absolute;
  • Finally, add navigation etc. to the page. In the example an asp.NET master page is used. If using a DWT copy any CSS Expression Web adds to the <head> section of the page. This will be removed when the DWT is attached, and must be replaced in an editable region of the <head> section in the page. FrontPage uses inline styles, and does not have this problem.

An example page based on this article is at pop-up-example.aspx


Of course - there is the easy way using jQuery.

This example uses the jQuery "fancybox" extension to pop-up the large image in the centre of the browser window.