OutFront Forums
     Home    Register     Search      Help      Login    

Sponsors
Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax
Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.
Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Follow Us
On Facebook
On Twitter
RSS
Via Email

Recent Posts
Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

 

rollover/mouse over

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> General Web Development >> rollover/mouse over
Page: [1]
 
 
jmc

 

Posts: 3
Joined: 6/24/2009
Status: offline

 
rollover/mouse over - 9/13/2009 11:04:33   
hi
I have searched prior discussions and can't find quite the right help -- I need to make it so when you roll the mouse over a photo a larger image comes up -- that achieved, if someone could then click on the larger image to order that product it would be perfect. I know how to use the feature thumbnail but don't want to have the viewer to have to click and be directed off the page.
A site that does pretty much what I'm looking for is

http://www.firemountaingems.com/shopping.asp?skw=KWGSBEADEMERALD

thanks for the help
Janice
Tailslide

 

Posts: 6756
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

 
RE: rollover/mouse over - 9/13/2009 11:21:41   
You'll need to use Javascript to do this.

Dynamic Drive have a load of scripts along these lines.

I've used the following script for something similar i.e. you mouseover or tab to the small image and you see the big image. You click on either the small or large image and you go to that particular page - you can also set it up to have sub titles.

http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

_____________________________

Little Blue Plane Web Design | Land Rover project

:)

(in reply to jmc)
jmc

 

Posts: 3
Joined: 6/24/2009
Status: offline

 
RE: rollover/mouse over - 9/13/2009 16:00:25   
to break this apart (if I'm understanding it)

<a href=" "
rel="enlargeimage::mouseover"
rev="loadarea:: " >Thumbnail Example 1</a><br />
<div id="loadarea" style="width: 600px"></div>

1)set the href to the jpg of my large image
2)the rel= tells it how to display the large image when the mouse hovers over it - how it looks is in the div id area
3) the rev - after the :: is this where my jpg info on my small image should go?
4) the js code it tells you to download -- why? I read through it and am not sure what to do with it

yes, I am most likely trying to do something above my head, but thought it would be interesting to learn something new
thanks for your help
Janice


(in reply to Tailslide)
Tailslide

 

Posts: 6756
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

 
RE: rollover/mouse over - 9/14/2009 1:28:51   
The external js file is the script itself - that's what does the actual work.

You need to add the link around the thumbnail image - the link points to the large image. The rel specifies whether the large image appears onclick or onmouseover. The rev specifies which div you want the large image to appear in.

_____________________________

Little Blue Plane Web Design | Land Rover project

:)

(in reply to jmc)
womble

 

Posts: 6275
Joined: 3/14/2005
From: Living on the edge
Status: offline

 
RE: rollover/mouse over - 9/14/2009 14:35:48   
If you just want a larger version of a small image and you're familiar with CSS, you could use one of the clever CSS tricks similar to the ones on Stu Nicholls' CSSPlay (check out the "image manipulation" section), but that's simply for enlarging an image. As Tailslide said, if you want to use 'onclick' you'll need to use Javascript, and as Tailslide says, Dynamic Drive has some great ones.

_____________________________

~~ "A cruel god ain't no god at all" ~~
~~ Erase hate. Practice love. ~~

(in reply to Tailslide)
smcfarland

 

Posts: 715
From: US
Status: offline

 
RE: rollover/mouse over - 9/20/2009 13:22:40   
I second CSS Play.

I replaced an entire JS drop down menu with CSS and it works wonderfully, without breaking, and in all browsers. It is a lot of fun once you get into it, especially in EW. I was really surprised, but I did the menu with a tutorial on microsoft's website. Who'da thunk it?

I went to the site - did you find what you are looking for already? You know, as a female looking at those beads, I found the pop up rather frustrating because it goes away if I try to click on the pop up. I am not sure if you were trying to resolve that. If that was the case, for $30, you can do Highslide.
www.highslide.com

_____________________________

Summer McFarland
________________________________________
the very best invoicing and time tracking app ever

(in reply to womble)
Page:   [1]

All Forums >> Web Development >> General Web Development >> rollover/mouse over
Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts