Image hover shows full sized image - Help

[Jeremy1026]

Ok, this is more of a plea for code, then for help. I want to have a photo gallery set up (I am using Dreamweaver) for my website where when a visitor hovers over the thumbnail, the full resolution image appears on the screen, preferably not a pop up.

 

[Jeremy1026]

http://www.plentyoffish.com/member1675799.htm

Something like the extra pictures user upload to that site.

I isolated the chunk of code that does it, and all the javascript code in the file, but it doesn't work on my local server...

 

[Makosuke]

WS Tooltip (does it have a "proper" name? Walter Zorn Tooltip?) is one I've used for this purpose; it's relatively easy to use, free, you can put basically anything into the appearing box, and it's quite customizable in terms of appearance and behavior:

http://www.walterzorn.com/tooltip/tooltip_e.htm

...though I'm not sure this is the best option for a simple appearing image. I'm curious if there's a better script for an image plus maybe a caption, since I was just getting ready to do exactly this with a LOT of images on a fairly large site (and it's not a gallery-type situation where I'd want to resort to a Lightbox-style script--just a quickie enlarge that doesn't preload, to save bandwidth where possible).

 

[angelwatt]

I found Hoverbox, which may be something you can use.

Makosuke, I have a script I use that's a simplified version of lightbox and doesn't preload images. You can see it in action at my site in the Artwork section. I have a creative commons license on it so you can mod it if need be to meet your needs.

 

[Jeremy1026]

WS Tooltip (does it have a "proper" name? Walter Zorn Tooltip?) is one I've used for this purpose; it's relatively easy to use, free, you can put basically anything into the appearing box, and it's quite customizable in terms of appearance and behavior:

http://www.walterzorn.com/tooltip/tooltip_e.htm

...though I'm not sure this is the best option for a simple appearing image. I'm curious if there's a better script for an image plus maybe a caption, since I was just getting ready to do exactly this with a LOT of images on a fairly large site (and it's not a gallery-type situation where I'd want to resort to a Lightbox-style script--just a quickie enlarge that doesn't preload, to save bandwidth where possible).

So, it looks like it should work, but doesn't. The page that I currently have it sitting on is http://www.btldetailing.com/BTL Detailing/gallery.html . If someone could take a peak and maybe see what's wrong?

 

[a456]

Here is the CSS - not mine, Dynamic Drive as it says.

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

</style>

HTML:

<a class="thumbnail" href="example.png" target=_blank>Example<span><img src="example.png" width="75"><small>Example</small></span></a>

Of course change example.png to your actual picture.

 

[angelwatt]

So, it looks like it should work, but doesn't. The page that I currently have it sitting on is http://www.btldetailing.com/BTL Detailing/gallery.html . If someone could take a peak and maybe see what's wrong?

What about it isn't working. When I hover over the thumbnail the larger version presents itself.

 

[Jeremy1026]

I found Hoverbox, which may be something you can use.

Makosuke, I have a script I use that's a simplified version of lightbox and doesn't preload images. You can see it in action at my site in the Artwork section. I have a creative commons license on it so you can mod it if need be to meet your needs.

Oh how I love your hover box! Works like a charm, updated my test page with it, works great. Just need to tweak a few things like the size and location of the images

 

[Jeremy1026]

What about it isn't working. When I hover over the thumbnail the larger version presents itself.

At the time of that post I was trying to use the wz_tooltip, not your hover box. I just switched to HB and it works great!

 

[design-is]

Just to throw in some other options, cssplay.co.uk has a variety of great ways to use just CSS to great loads of cool stuff.

 

[angelwatt]

At the time of that post I was trying to use the wz_tooltip, not your hover box. I just switched to HB and it works great!

Just to clarify, the hoverbox isn't mine, I just found it. The script I mentioned as my own wasn't linked to and doesn't address your needs, but might for Makosuke for what he mentioned as needing.

 

[Jeremy1026]

Just to clarify, the hoverbox isn't mine, I just found it. The script I mentioned as my own wasn't linked to and doesn't address your needs, but might for Makosuke for what he mentioned as needing.

Thanks for the clarification, the script you linked to is working great

 

[MrSmith]

Another option is PostcardViewer. Pretty cool.