Reply
Image zoon on mouseover
Old 05-17-2006, 05:36 PM Image zoon on mouseover
Junior Talker

Posts: 4
Hello, let me start by saying I am not sure if this should be in another part of the forum, if so, my apologies.

I am looking for a simple way to display a larger sized image when you mouseover a thumbnail on my page. I have seen this used on various sites, the cleanest I have found appears on the templatemonster.com site when you mouse over a template thumbnail. I notice they have a command that is something like onmouseover = trail (image name), but I am sure there is more to it than that.

Thanks in advance for any help!

JH
jslost is offline
Reply With Quote
View Public Profile
 
When You Register, These Ads Go Away!
Old 05-18-2006, 08:28 AM Re: Image zoon on mouseover
Minaki's Avatar
Defies a Status

Posts: 1,626
Location: Guildford, UK
'trail()' will most likely be a JavaScript function. You could view the source of that page and find the function to see how it works, or you could search the web for a simular one
Or you could learn JavaScript and write your own...
__________________
Minaki Serinde MCP
"Wow, Linux is nearly on-par with Windows ME!"
Inoxia Pyrotechnics Supplies | Surrey Angels Cheerleading Squad
Minaki is offline
Reply With Quote
View Public Profile Visit Minaki's homepage!
 
Old 05-18-2006, 10:49 AM Re: Image zoon on mouseover
Ultra Talker

Posts: 255
Location: NY
This is what I've done to create Pop up windows from thumbnails:

Please note: You'll need two sets of images - a small, thumbnail image and the accompanying full-sized image.

Place the script below where you want the thumbnail to appear on your page.

<script language=JavaScript>
function openindex()
{
var OpenWindow=window.open("", "newwin","height=318,width=402");
OpenWindow.document.write("<img src='fullsize.jpg'>")
OpenWindow.document.write("<br>")
OpenWindow.document.write("<center><a href='javascript:self.close()' target='_self'>Close</a></center>")
}

</script> <a href="javascript(colon goes here)openindex()" target=_self><img border=no src="images/thumbnail.jpg" width="96" height="72"></a>

Within the code, height=318,width=402 needs to be substitited with the dimensions of your own full-size image.

NOTE: add 30 to the height, and 18 to the width.

In my example, my full-sized image dimensions are a height of 288, and a width of 384 . When adjusted according to the "NOTE"above, I came up with the dimensions of height=318 and width=402. fullsize.jpg is the name of my full-sized image.

Replace this with the name of your full-sized image. thumbnail.jpg is the name of my thumbnail sized file. Replace this with the name of your thumbnail sized file. openindex is the name of this particular function.

Each thumbnail pop-up must have it's own function with it's own name. If you've just added the Thumbnail Pop-Up Code to your page, and now you want to make another one.

Simply repeat all of the steps above, and then rename this (openindex) function to something else, for instance, openindex2. Do this for each new thumbnail pop-up you wish to add.

Please note that I had to place a bold (colon goes here) so that a smiley face wouldn't appear, just replace this (colon goes here) with :
This should do it.
DianeD
DianeD is offline
Reply With Quote
View Public Profile Visit DianeD's homepage!
 
Old 05-18-2006, 12:13 PM Re: Image zoon on mouseover
Minaki's Avatar
Defies a Status

Posts: 1,626
Location: Guildford, UK
A few issues with that...
- Using a single function for every image is bad coding practise. It would be better to have one function and pass the image name, width & height to the function as parameters.
- A bit of CSS can be used to remove the margins & padding of the opened window so you don't need to compensate. It's also more visually pleaseing.
- Image thumbnails can be auto generated with server side code.
- I think jslost is looking to open the image when the mouse is hovered on the thumbnail, not on click. www.istockphoto uses this behaviour quite well, you might want to check it out.
- You can turn of smileys in your post if you 'Go Advanced'
__________________
Minaki Serinde MCP
"Wow, Linux is nearly on-par with Windows ME!"
Inoxia Pyrotechnics Supplies | Surrey Angels Cheerleading Squad
Minaki is offline
Reply With Quote
View Public Profile Visit Minaki's homepage!
 
Old 05-19-2006, 06:56 AM Re: Image zoon on mouseover
Experienced Talker

Posts: 47
Go to this link and view the source. It is all html with a little javascript and does what you asked for.


http://www.geocities.com/ccbebsnh/PhotoGallery1.htm


Frodocyber
Frodocyber is offline
Reply With Quote
View Public Profile
 
Old 05-19-2006, 07:49 PM Re: Image zoon on mouseover
Junior Talker

Posts: 4
Minaki, you are correct in what I am looking for. I went to istockphoto but can't seem to find where they use this.

The easiest place to see exactly what I am looking for is templatemonster. Hover over any template and that is what my images should do.

And yes, I DO need to learn javascript, but any help in finding this script would be apprecaited.

Thanks everybody for helping out.
jslost is offline
Reply With Quote
View Public Profile
 
Old 05-20-2006, 05:02 AM Re: Image zoon on mouseover
chrishirst's Avatar
Super Moderator

Posts: 13,481
Location: Blackpool. UK
something like http://www.candsdesign.co.uk/page-te...ery/layout.asp

the code is in the page, do a view-source

<added>

It's called a disjointed rollover BTW

</added>
__________________
Chris. ->> Links are advertising NOT optimising!! <<-
Indifference will be the downfall of mankind, but who cares?
Code Samples | People Counting System

Last edited by chrishirst : 05-20-2006 at 05:04 AM.
chrishirst is online now
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 05-20-2006, 02:07 PM Re: Image zoon on mouseover
Minaki's Avatar
Defies a Status

Posts: 1,626
Location: Guildford, UK
It's not a disjointed rollover. It's another thing where a small DIV hovers over the rest of the page, like a tooltip but with a larger version of the image in it.

I'm gonna give this a go on my website, so when I'm done I'll post the code

- Mina
__________________
Minaki Serinde MCP
"Wow, Linux is nearly on-par with Windows ME!"
Inoxia Pyrotechnics Supplies | Surrey Angels Cheerleading Squad
Minaki is offline
Reply With Quote
View Public Profile Visit Minaki's homepage!
 
Old 05-20-2006, 04:11 PM Re: Image zoon on mouseover
chrishirst's Avatar
Super Moderator

Posts: 13,481
Location: Blackpool. UK
ok then

http://www.cands.dnsalias.com/page-t...ver/layout.asp
__________________
Chris. ->> Links are advertising NOT optimising!! <<-
Indifference will be the downfall of mankind, but who cares?
Code Samples | People Counting System
chrishirst is online now
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 05-26-2006, 10:13 AM Re: Image zoon on mouseover
Ultra Talker

Posts: 255
Location: NY
Here's an interesting website to visit. Go to "Image Manipulation" and "Photo Galleries" and you can see the different ways that he displays his images using only CSS.

And I've used this method on my own website: A 2-Step photo gallery.

And the finished project can be seen here.

Just my 2 cents,
DianeD
DianeD is offline
Reply With Quote
View Public Profile Visit DianeD's homepage!
 
Reply     « Reply to Image zoon on mouseover
 

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off




   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML

 


Page generated in 0.37184 seconds with 12 queries