How to move images |
How to move images |
xxkasperxx |
May 28 2011, 10:30 AM
Post
#1
|
Serious Coder Group: Members Posts: 261 Joined: 30-April 11 Member No.: 14,449 |
how do i put the images were i want? heres my code.
CODE <style type="text/css"> .thumbnail{ position: relative; z-index: 0; } .thumbnail:hover{ background-color: transparent; z-index: 50; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: white; padding: 5px; left: -1000px; border: 0px dashed gray; visibility: hidden; color: black; text-decoration: none; } .thumbnail span img{ /*CSS for enlarged image*/ border-width: 0; padding: 0px; } .thumbnail:hover span{ /*CSS for enlarged image on hover*/ visibility: visible; top: 0; left: 150px; /*position where enlarged image should offset horizontally */ } </style> <!-- Start Pics --> <a class="thumbnail" ><img src="images/images/raj_1.png" width="150px" height="100px" border="0" /><span><img src="images/images/raj_1_enlarge.png" /></span></a> <a class="thumbnail" ><img src="images/images/raj_1.png" width="150px" height="100px" border="0" /><span><img src="images/images/raj_1_enlarge.png" /></span></a> the live site is "www.[removed per request from xxkasperxx].org" i need that to work on the Photos page. |
Frederiek |
May 28 2011, 12:07 PM
Post
#2
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
It seems you copied that code from somewhere, hence the comments in the CSS. Did that go with an exemple to enlarge the images that way? Can you post the url to that? Besides, you don't have that code in your page and the enlarged image isn't on the server either. Can you post the url of a test page?
Anyway, usually javascript (often the jQuery library) is used for such things, especially to position the enlarged image as an overlay (usually centered) on the page, eg : Lightbox , Fancybox, FancyZoom and Stu Nicholls has some nice exemples of his own "lightbox" too (search for the word "lightbox" on the page). |
Darin McGrew |
May 28 2011, 12:13 PM
Post
#3
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
QUOTE how do i put the images were i want? That depends on what you want to do differently than what you're doing now. If it were my site, I'd get rid of all the absolute positioning. |
rasha666 |
May 29 2011, 02:21 AM
Post
#4
|
Group: Members Posts: 5 Joined: 29-May 11 Member No.: 14,645 |
try to add class with this :
You can change name of class if you want .imgmove { position:absolute; top:how many px u want; left:how many px u want; } than you add this in to your img tag class="imgmove" <img class="imgmove" src="yourpicture.extension"> i usually do that in this way i don't know do u really know css so i say all this like you don't know |
Lo-Fi Version | Time is now: 24th April 2024 - 06:51 PM |