/    Sign up×
Community /Pin to ProfileBookmark

mouse over image pop up image ?

Copy linkTweet thisAlerts:
Sep 03.2010

Hello

I need help with a script or other suggestions to mouse of images in a table that would pop up a frame less window or just a larger image of the original image. I use photo shop and slide of an image I’m no pro but this is how I taught myself. Here is a link to the design I need help with [url]http://www.simplystatedphotography.net/[/url] I want mouse over the images on the book pages and the frames at the bottom of the page and a larger version of the picture would display on mouse over. I also want to use the same script for the portfolio page with thumbnails on the left side of the page and mouse over and set them to display push or pulling the image so it lines up on the right side blank page or replaces a picture on the right that was sliced so a template of that slice would be used then images would be added to the template so the page on the book would remain the same. I did not slice the picture on the website now and it’s not centered it’s just something uploaded for now.

Thanks for any help.

to post a comment
JavaScript

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@Rufe0Sep 07.2010 — [CODE]<html>
<head>
<script language="JavaScript" type="text/javascript">


var photolist = new Array()
photolist[0]="http://www.jwst.nasa.gov/images/people.jpg";
photolist[1]="http://www.nri.ucsb.edu/images/people.jpg";
photolist[2]="http://www.mariestopes.org.uk/imagecontent/youngPeople.jpg";
photolist[3]="http://www.iwatchstuff.com/2008/03/06/smart-people-poster-quaid.jpg";
photolist[4]="http://lefteyeonthemedia.files.wordpress.com/2008/12/people.jpg";
photolist[5]="http://www.software-dungeon.co.uk/images/106927_72131Commerce_People.jpg";
photolist[6]="http://www.warrington.gov.uk/images/Young%20People_tcm15-12493.jpg";
photolist[7]="http://scrapetv.com/News/News%20Pages/Health/Images/little-people-big-world-cast.jpg";
photolist[8]="http://www.fileguru.com/images/b/perfect_people_icons_desktop_icons_and_cursors-21649.jpeg";
photolist[9]="http://sivers.org/images/people-per-week.gif";
photolist[10]="http://sarahsilvermanonline.com/blog/wp-content/uploads/2008/04/sarah-silverman-people-most-beautiful.jpg";

var thumblist = new Array()
thumblist[0]="http://profile.ak.fbcdn.net/profile-ak-snc1/object3/1780/105/q52125765346_8313.jpg";
thumblist[1]="http://profile.ak.fbcdn.net/profile-ak-snc4/object3/1069/94/q109791120456_5648.jpg";
thumblist[2]="http://static2.revver.com/avatars/ThesePeopleFace_36x36.jpg";
thumblist[3]="http://i2.squidoocdn.com/resize/squidoo_images/50/lens7070502_1264196405reasons_people_become_hom";
thumblist[4]="http://farm1.static.flickr.com/8/buddyicons/[email protected]?1112050145";
thumblist[5]="http://teimlo.co.uk/content/wallpaperfiles/cache_type_1_cloud-people-opt.gif";
thumblist[6]="http://www.gloucestershire.gov.uk/media/images/i/k/people-discussiontn.jpg";
thumblist[7]="http://www.physics.harvard.edu/img/auxil/People.gif";
thumblist[8]="http://www.changepeople.co.uk/siteImages/menu/what_people_say.jpg";
thumblist[9]="http://resources.shopstyle.com/sim/ff/45/ff4578c778cc901edc4ff20660ac5f87_small/people-tree-asos-black-dresses-fairtrade-handwoven-silk-pocket-dress.jpg";
thumblist[10]="http://www.unicef.org/people/images/topNav_unicef_people_off.gif";



var index = 0

function updatethumbs(indx){
index = (index + indx) % photolist.length;
if(index<0){index=photolist.length+index;}
document.getElementById("bigphoto").src = photolist[index];
document.getElementById("thumb5").src = thumblist[(index+2)% photolist.length];
document.getElementById("thumb4").src = thumblist[(index+1)% photolist.length];
document.getElementById("thumb3").src = thumblist[index];
if((index-1)<0){
document.getElementById("thumb2").src = thumblist[photolist.length+(index-1)];
}else{
document.getElementById("thumb2").src = thumblist[(index-1)% photolist.length];
}

if((index-1)<0){
document.getElementById("thumb1").src = thumblist[photolist.length+(index-2)];
}else{
document.getElementById("thumb1").src = thumblist[(index-2)% photolist.length];}

}


</script>
</head>
<body onload="updatethumbs(0)">
<table>
<tr>
<td>
<img onclick="updatethumbs(-1)" src="http://icons.iconseeker.com/png/fullsize/crystal-clear-actions/back-arrow.png" height="64px" width="64px"></img>
</td>
<td colspan="5" align="center"><img id="bigphoto" height="512px" width="512px" style="margin-top:50px; margin-bottom:50px;" ></img>
</td>
<td>
<img onclick="updatethumbs(1)" src="http://www.iconspedia.com/uploads/2106003206.png" height="64px" width="64px"></img>
</td>
</tr>
<tr>
<td>
<img onclick="updatethumbs(-3)" src="http://icons.iconseeker.com/png/fullsize/crystal-clear-actions/back-arrow.png" height="64px" width="64px"></img>
</td>
<td>
<img onclick="updatethumbs(-2)" id="thumb1" height="128px" width="128px" ></img>
</td>
<td>
<img onclick="updatethumbs(-1)" id="thumb2" height="128px" width="128px" ></img>
</td>
<td>
<img id="thumb3" height="128px" width="128px" ></img>
</td>
<td>
<img onclick="updatethumbs(1)" id="thumb4" height="128px" width="128px" ></img>
</td>
<td>
<img onclick="updatethumbs(2)" id="thumb5" height="128px" width="128px" ></img>
</td>
<td>
<img onclick="updatethumbs(3)" src="http://www.iconspedia.com/uploads/2106003206.png" height="64px" width="64px"></img>
</td>
</tr>
</table>
</body>
</html>
[/CODE]
×

Success!

Help @macgyver24 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...