How to get a picture to expand on rollover?

[foevah]

Hi everyone!

 

I saw this website http://www.skaffers.com and when you roll over an image a speech bubble opens and the picture expands!

 

I saved the skaffers webpage to my desktop and I tried to customize it but I dont know how to adjust it to my cause. I can't get the picture to load on rollover either.

 

I made a blog using codegrrl blog tutorials. What id like to do is post a picture that expands on rollover using my blog entry form.

 

Please can someone let me know if this is possible and how to go about doing this!

Thanks and all the best!

[fenway]

I'm sure it's all in the code on that page... if you can dig though it and find the revelant section, I'd be more than happy to walk you through ti.

[foevah]

Ok these are my attempts at taking the code out of skaffers source

http://www.jamesgardner.lincoln.ac.uk/imagexpand/ier3.html

http://www.jamesgardner.lincoln.ac.uk/imagexpand/ier.html

http://www.jamesgardner.lincoln.ac.uk/imagexpand/imageexpand.html

 

Surprise.. Surprise It doesnt work  ???

 

When I saved the skaffers webpage to my desktop and edited it in dreamweaver some of the code I couldnt edit because its in templates which are locked.. I've never used templates before so I have no idea why the code is in grey and locked.

 

 

[foevah]

This is my attempt with a normal speechbubble but the main image doesnt load on rollover:

http://www.jamesgardner.lincoln.ac.uk/imagexpand/imagexpand02.html

This method isn't doing what I want. I need to change the text with the image.

 

[mainewoods]

If the skaffers web page uses ajax on it, then it would fail on yours because the browser will not let a web page make an ajax call to a different domain than the one the page was loaded from.  That's a generic security restriction observed by all browsers.  I believe some browsers will let you get away with that if you set security to its lowest setting.

[mainewoods]

skaffers.com is running these 3 famous free script libraries/frameworks:

 

<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>

-Ebay uses 'lightbox.js' technology for their popup full size images!

 

-Below is the code that actually implements the mouseover for the 'RESIDENTIAL' section picture of the skaffers.com page.  The action is all happening in the 'makevisible()' and 'ddrivetip()' functions on mouseover and the 'hideddrivetip()' and 'makevisible()' on mouseout.  I would suspect that those functions are found in the script libraries above.  To figure out how skaffers.com does it, study the doc for those script libraries.

 

<A href="/residential/post_View.asp?m=residential&pGuid={CD8B47D9-E0CD-43B5-80B4-F5F887129CF6}" style="text-decoration:none ">
<img src="/residential/_thumbnail/res_ID390Pic1.jpg" width="110" class="image" alt="Residential Listings" 
    onMouseover="makevisible(this,1);ddrivetip('<img src=/residential/_upload/res_ID390Pic1.jpg ><br><font class=fontblacksmall>Click to see details!</font>')" 
    onMouseout="hideddrivetip();makevisible(this,0);" 
    style="filter:alpha(opacity=100);-moz-opacity:10"></A>

[foevah]

ok I attached those scripts to this attempt

http://www.jamesgardner.lincoln.ac.uk/imagexpand/ier3.html

the image doesnt expand..

 

I searched google for lightbox and the examples I found are doing what I want.

http://www.huddletogether.com/projects/lightbox2/

They provide a tutorial of how to do it but its not what Im after.

 

If anyone knows a tutorial of how to do this please let me know!

[Stickybomb]

i have no desire to drudge through all of there code at this time but they are using a modified version of a free script to attach an image to your cusor.

 

/*

Simple Image Trail script- By JavaScriptKit.com

Visit http://www.javascriptkit.com for this script and more

This notice must stay intact

*/

 

http://www.istockphoto.com/js/filesearchhover.js

 

you can mess with this file to obtain the same eefect.

 

hope this helps

[foevah]

It's not what I want tho.. I can make an image enlarge on rollover like this already.

http://www.jamesgardner.lincoln.ac.uk/imagexpand/imagexpand02.html

 

The speechbubble background image on all the rollovers from istockphoto are all the same size. On skaffers all the speechbubble bg's adjust to match each image.

 

I've been looking for this effect  :-\

[foevah]

This is the result from istockphoto

http://www.jamesgardner.lincoln.ac.uk/imagexpand/imagexpand04.htm

[foevah]

refresh this url the code is cleaer and you can see the image larger then the speechbubble background.

I dont want to resize the images im using to fit in the speechbubble bg so id like the background to resize with the image.

 

:o

[Stickybomb]

i didn't mean for you to use istocks i meant look through it and combine it with what you already have. basically you just need to put the image in a div with auto height and width and let the image size affect the size of the div then give it a white background and a solid border to match the back image and your set. if you create the html for this and then plug it into the script from istock you should achieve your desired effect.