ENLARGE IMAGE ON MOUSEOVER

Report · Feb 15, 2012

I am using dreamweaver cs5.5.

I am totally stuck. Been searching internet for a week with no success.

My problem seems simple...all I want to do is setup a rollover where when

the mouse rolls over the original image, it produces a different and larger image.

There is no need for a hyperlink.

I am familiar with rollover links etc but these only return an image of the same

size as the original.

Any assistance would be wildly appreciated.

Regards,

Robert

Report · Feb 15, 2012

Hi Robert

I had created demo example for you. There is no anchor tag and when you rollover the image you get the bigger one.

HTML code and its CSS

---------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Image Hover Over</title>

<!--

.box {

background-repeat: no-repeat;

width:275px;

height:95px;

}

.box:hover {

background-repeat: no-repeat;

width:682px;

height:400px;

}

-->

</style>

</head>

<body>

</div>

</body>

</html>

Thanks

Andy

Report · Feb 16, 2012

Thank you Andy for your interest.

I am pretty, no, very ignorant regarding html, css etc so please indulge me.

Do I paste the code as shown below into my page's html. If so where do I

paste it ?

I tried it under "body" near top of code page but it returned a lot of

code in the

google view. I guess there must be a certain location.

Thanks in anticipation.

Robert

Report · Feb 17, 2012

Hi Robert

Apologize to post late. Here are the steps

Place the below code just before the closing </head> tag.

<!--

.box {

background-repeat: no-repeat;

width:275px;

height:95px;

}

.box:hover {

background-repeat: no-repeat;

width:682px;

height:400px;

}

-->

</style>

Place the below code in <body> tag.

Thatz it. Done.

Make sure when you run the page you are connected to internet.

Thanks

Andy

Report · Feb 18, 2012

Hello Andy,

I have uploaded the page containing the 5 images. I hope you may be

able to check my page script and confirm the line insertion points for your

script.

Hope I am not taking too much of your time. I am prepared to pay for your

help. I just need to get this completed as soon as possible as my

customer need it functioning.

Regards,

Robert

Report · Feb 18, 2012

Sorry Andy,

Forgot to give you page address.

www.photosplus.com.au/demopage/index.html

Robert

Report · Feb 18, 2012

Hi Robert

After viewing the link what i understand is you are trying to creating a image gallery when user click on the image it will show up the larger one.

Thanks

Andy

Report · Feb 19, 2012

You want a slideshow, not an image rollover.

Use jQuery Fancybox.

http://fancybox.net/

Or, log-in to the Adobe Exchange with your Widget Browser and grab jQuery Lightbox Gallery Widget

http://labs.adobe.com/technologies/widgetbrowser/

Nancy O.

Alt-Web Design & Publishing

Web | Graphics | Print | Media Specialists

http://alt-web.com/

http://twitter.com/altweb

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Feb 20, 2012

Hello Nancy,

Thank you for your assistance. I am not sure what I need but I really

need help

before I overrun my promised delivery date of this page.

The 5 images you saw on the link I sent Andy will be thumbnail size on

the finished page.

I want to fit perhaps 20 thumbnails as my client wants all info to be on the

main page only hence there will only be room for 1 image to be full size

at any

one time.

It seemed to me that onmouseover was easier as all I want is for the

thumbnail image to change size

(larger) when viewers mouse passes over or hovers.

I looked at widget page you gave me but it seems complex and I need to

down tools and try

something that I have had no experience with and I have little time to

learn.

As I am html illiterate I downloaded an app called web studio 5

http://webstudio.wikispot.org/Larger_Image_on_mouseover this app

seems to be exactly what a struggler like me needs. It works like a

dream BUT I only get the frame of the image and NOT the image itself.

The frame enlarges on mouseover as

required and shrinks on mouse out. But without the image it is no

use.....another failure.

If you can find the time to go to this page you will see a demo on

youtube. Its exactly what I need

and if you can assist I would be eternally grateful.

Looking forward to any help you can provide.

Regards,

Robert

Report · Feb 20, 2012

WebStudio 5 writes terrible code. I wouldn't use it.

If you go to this link, and click on images, you'll see how FancyBox works (ignore rotation, you don't need that). And it's very simple to set up. http://alt-web.com/GALLERY/Photo_Gallery.html

If you want to hire me to help you with this, you can contact me through my web site.

http://alt-web.com/contact.shtml

Nancy O.

Alt-Web Design & Publishing

Web | Graphics | Print | Media Specialists

http://alt-web.com/

http://twitter.com/altweb

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Feb 20, 2012

Thanks Nancy,

I will try for a few hours and if I cant sort it out I will look at

paying you for assistance. I will have about 14 thumbnails all up

which need to expand say 300 to 400% on mouse over and return

to original thumbnail on mouse out. Please supply approx $ cost for this.

Further, I have given up on Dreamweaver. Its sending me mad....! So I will

need to add the script you supply to my new web design tool,

Web Studio. Or would I need to upload the page without the mouseover

and give you access to complete this part of page.

Thanks very much for your interest.

Regards,

Robert

Report · Feb 20, 2012

Hello Nancy,

I had a look at at the gallery link below. However, on mouseover it

shows a same size image

but with a different colour. To actually get a larger and /or different

image you must

click the link. This is only a demo in rollover images with a hyperlink

connecting to an image

at a different URL. I can do this but my customer want a

larger/different image on mpuseover.

I see a lot of these on modern web pages,

Please comment on this.

Regards,

Robert

Report · Feb 21, 2012

Give us an example of what you want.

Nancy O.

Alt-Web Design & Publishing

Web | Graphics | Print | Media Specialists

http://alt-web.com/

http://twitter.com/altweb

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 02, 2013

Quick question for Andy. This hover is exactly what I want. Works fine except I don't want google image. How do I replace these image weblinks:

with my image files. For example, following doesn't work:

Hope this is an easy one, I note to do a standard hover (is rollover same as hover?) using insert/image objects/rollover image Dreamweaver references my pictures as:

img src="images/mypicture.png"

Your help is much appreciated

Spen

Report · Jan 02, 2013

Rollover behaviors use JavaScript to act on foreground images in the HTML code.

CSS uses background-images. When the link is moused over, the background image changes.

This is a CSS property:

a:hover { /**on mouseover, the background image changes**/

}

This is an HTML element:

If your CSS code is in your HTML document, use this:

a:hover{

}

If your CSS code is in an external stylesheet located in another folder, use this:

a:hover {

}

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 02, 2013

Ok - I'm a little out of my depth BUT:

I used your way of referencing the images and that worked. CSS in HTML document I take to mean on the source code tab.

With the google code above it shifted the entire page down as GOOGLE resized. Now, as you said its background, its not shifting page down anymore i.e. any pictures below on my page stay right where they were and the resized hover pic slides underneath (as a background).

I really want a foreground hover (I find pop ups ugly) that pretty much full screens and doesnt shift rest of screen. Is that possible do you know? I am wanting to do this on what is effectively an organization chart made up of pictures that full screen on the mouse over. And I don't know how ito do the organsation chart in Dreamweaver (doing in PPT then importing makes the whole thing one picture which I don't want - each bubble needs to be a pic). I see people offering "widgets" or their own programs to do an org chart in sharepoint - but nothing, not even a template, in dreamweaver. Can you point me in right directions??

Sorry if inarticulate with css and html, etc.

Many thanks

Spen

Report · Jan 02, 2013

I won't kid you, interactivity on an organizational chart is going to be a really big chore. I wouldn't waste my time using Rollover Behaviors for this.

You might want to look at Adobe Edge Animate for your chart and then import the Edge Animation into your DW page.

http://html.adobe.com/edge/animate/

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 02, 2013

buddy to untangle your life is the best thing you do this in Fireworks PNG and export in HTML format and insert in dreamwever. Recalling that the button you have to use the F8 option to create and edit button the way you want. This will greatly facilitate your life. See an example on my site [link removed], a look at the menu.