CODEWITHSUNDEEP
htmlthumbnails
Ira Baxter
Ira Baxter

Reputation: 95324

How to create thumbnails with hover display on plain HTML page?

I have some large .png (.jpg, ...) files that require pretty much a full screen to see. How do I create thumbnails on a standard HTML page? Is there some kind of size scaling control in the tag that I've somehow missed?

Can I get the large image to display when the mouse hovers over such a thumbnail? (JavaScript and CSS are OK for either answer).

EDIT: Since target browsers may be showing at different size resolutions, how do I keep the thumbnail proportionally scaled to the displayed size of the web page/text?

Upvotes: 2

Views: 9647

Answers (1)

Arun
Arun

Reputation: 132

The technique really amounts to smoke and mirrors, since both images are directly coded on the page. However, the larger image is made invisible through CSS and only becomes visible when the visitor hovers over the link. Clicking the link opens the full-size image in the new page. The image above is coded as:

<div id="links" align="center">
  <div class="thumbnail" style="background-image: url(../thumbs/294.jpg)">
    <a href="../images/nebulan90.jpg" target="_blank">
    Nebula N90<img src="../images/nebulan90-s.jpg" alt="Nebula N90" /></a>
  </div>
</div>

Images that are linked within the division are automatically hidden through CSS:

#links a img {
  height: 0;
  width: 0;
  border-width: 0;
}

Since all images are automatically hidden, it is necessary to display the thumbnail as a background image outside of the actual link. In order for the link to work over the image and display the text below the image (instead of over it), it is necessary to include this code:

#links a {
  display:block;
  padding-top: 110px;
}

The larger image is revealed above the link when the cursor is hovered over it:

#links a:hover img {
  position: relative;
  top: -260px;
  left: -90px;
  height: 240px;
  width: 320px;
  border-width: 2px;
  border-color: #0ff;
}

Upvotes: 2

Related Questions