PDA

View Full Version : Creating image roll overs with out flash? (see link)



William
6th February 2008, 07:39 PM
Hey,

I'm working on a website and having been doing a few test, I'm to create image roll overs with small thumbnails and then a large image next to the thumbnails, so when the mouse rolls over small image the big image changes.

I have created this in flash, but want to try and do it using html/javascript so that it is easier for the client to change images in contribute.

This is my example in flash: http://web.mac.com/lelongw/Site/Blank.html

If anyone could give me some assitance or point me in the right direction with some links or books that would be great.

Thanks

William

purana
6th February 2008, 07:53 PM
Google search, you'll find plenty of javascript examples.

marc
6th February 2008, 08:22 PM
Javascript would be the way to go. You're probably interested in the onmouseover function.

And I'm glad you're not doing this with Flash. Much nicer way to go.

oneplusone
6th February 2008, 08:34 PM
http://meyerweb.com/eric/css/edge/popups/demo2.html

http://www.tjkdesign.com/articles/css%20pop%20ups/6.asp

http://www.communitymx.com/content/article.cfm?cid=E11E8

http://pmob.co.uk/pob/disjointed1.htm

milliedog
6th February 2008, 08:37 PM
Download (http://www.adobe.com/downloads/) the trial version of Dreamweaver; it has a built in tool that does this.

William
6th February 2008, 08:54 PM
Download (http://www.adobe.com/downloads/) the trial version of Dreamweaver; it has a built in tool that does this.

Hi,

I have the full version of dreamweaver as I am using it to build the site, which is the tool I would use to achieve this?

Thanks

William

jrad
6th February 2008, 08:54 PM
As said above, Dreamwaver has a wizard to help you create rollovers and it does it really well.

killerpunch
6th February 2008, 09:18 PM
Yep, in Dreamweaver try Insert > Image Objects > Rollover Image.

There's also a button for it in the Inserts Window (Under Common Elements)

Fill in the relevant info and that should get you out of trouble!

Edit: Sorry just realised you want a separate image to change, not the button... (damn Corona :P }

funkmaster_dan
6th February 2008, 09:47 PM
This is actually surprisingly easy to get working

Here is how I would code it:

<html>
<head>
<title>Java Roll Over Example</title>
<script language="javascript" type="text/javascript">

function imagechange(url) {

document.getElementById('bigimage').src = url;

}

</script>
</head>

<body>

<p>
<img src="image1.jpg" onmouseover="imagechange('image1.jpg')">
<img src="image2.jpg" onmouseover="imagechange('image2.jpg')">
<img src="image3.jpg" onmouseover="imagechange('image3.jpg')">
</p>
<p>
<img src="image1.jpg" id="bigimage">
</p>

</body>

</html>


Hope this helps you out William :thumbup:

William
6th February 2008, 10:08 PM
Hey,

Thanks for everyone who helped, I got it working using behaviours and this link http://www.communitymx.com/content/article.cfm?cid=E11E8, thanks to an above poster.

Thanks again to everyone who assited!!

William

xfodder
6th February 2008, 10:25 PM
i use css to do image rollovers, its the easiest and the quickest

bartron
6th February 2008, 10:36 PM
i use css to do image rollovers, its the easiest and the quickest

ditto

The advantage is that with :hover is you don't need to deal with seperate onmouseover and onmouseout events.

handy example with rolover gif here http://www.ssi-developer.net/css/menu-rollover-effect.shtml

Linux_insidev2
6th February 2008, 11:16 PM
i use css to do image rollovers, its the easiest and the quickest

I was going to suggest the same

Everyone in the world still seems to have a stiffy for JS though, CSS is superior.

xfodder
7th February 2008, 12:04 AM
JS is only beneficial if you want to do some fancy fading or something like that, for simple mouse overs css is so much easier