Geek Answers Handbook

<HTML> A thumbnail scroll image is displayed only on the left side of the screen.

I am learning how to build a website using Dreamweaver CS6. I wanted to make a photo gallery that shows thumbnails on the page, but when you roll the cursor over them, the screen displays a full-size image on the left and slightly lower than the thumbnail. Here is what I found while searching on the Internet (it was probably found here, but I don’t remember who posted it, so if you posted it, it all depends on you).

I got this in my HTML code:

<table> <tr> <td> <a class="thumbnail" href="#thumb"> <img src="productURL" width="100px" height="142px" border="0" /> <span> <img src="productURL" /> <br /> <font face="arial">productname </span></a> </font> </td> <td> <a class="thumbnail" href="#thumb"><img src="productURL" width="100px" height="142px" border="0" /><span> <img src="productURL" /><br /><font face="arial"> productname</span></a></font> </td> <td> <a class="thumbnail" href="#thumb"><img src="productURL" width="100px" height="142px" border="0" /><span> <img src="productURL" /><br /><font face="arial"> productname</span></a></font> </td> <td> <a class="thumbnail" href="#thumb"><img src="productURL" width="100px" height="142px" border="0" /><span> <img src="productURL" /><br /><font face="arial"> productname</span></a></font> </td> </tr> <table>

And then this is on my CSS:

 .thumbnail{ position: relative; z-index: 0; } .thumbnail:hover{ background-color: transparent; z-index: 50; } .thumbnail span{ position: absolute; background-color: lightyellow; padding: 5px; left: 1000px; border: 1px dashed gray; visibility: hidden; color: black; text-decoration: none; } .thumbnail span img{ border-width: 0; padding: 2px; } .thumbnail:hover span { visibility: visible; top: 300px; left: 107px; }

I thought this was pretty good code, however I can't figure out how to make the image pop up next to the thumbnail. I tried to create a "subclass" called "span_2", but it did not exit correctly and messed up the whole page.

I think this is a big question, but I need help. This week I started playing with HTML ...

EDIT

Is there any function where I can select the location of the thumbnail and set the image to be displayed right next to it?

+4
source share
2 answers

I am making a valid new code on your website: http://jsfiddle.net/sMLbP/4/

There is HTML:

 <div class="container_image"> <a class="thumbnail" href="#thumb"><img src="productURL" width="100px" height="142px" border="0" /></a> <div class="image"> <img src="productURL" /> <span style="font-family:arial"> productname</span> </div> </div> <div class="container_image"> <a class="thumbnail" href="#thumb"><img src="productURL" width="100px" height="142px" border="0" /></a> <div class="image"> <img src="productURL" /> <span style="font-family:arial"> productname</span> </div> </div> <div class="container_image"> <a class="thumbnail" href="#thumb"><img src="productURL" width="100px" height="142px" border="0" /></a> <div class="image"> <img src="productURL" /> <span style="font-family:arial"> productname</span> </div> </div> <div class="container_image"> <a class="thumbnail" href="#thumb"><img src="productURL" width="100px" height="142px" border="0" /></a> <div class="image"> <img src="productURL" /> <span style="font-family:arial"> productname</span> </div> </div>

[UPDATED] There is CSS:

 .container_image { float:left; position:relative; margin-right:20px; } .container_image:hover{ cursor:pointer; } .container_image .image { position: absolute !important ; background-color: lightyellow; border: 1px dashed gray; top: -1000px !important ; z-index:10 !important ; } .container_image:hover .image { left: 100px !important ; top:0px !important ; }
+4
source

You are thinking in the right direction there with the span element.

Take a look at display:block; , it makes any page element behave like a block element (e.g. div)

Also in the width and height of the image you usually do not use units.

Go to online resources as follows: http://www.w3schools.com/html/default.asp

to learn some html basics.

+1
source

More articles:


All Articles