|
|
|
|
||||
|
Welcome to the GoFuckYourself.com - Adult Webmaster Forum forums. You are currently viewing our boards as a guest which gives you limited access to view most discussions and access our other features. By joining our free community you will have access to post topics, communicate privately with other members (PM), respond to polls, upload content and access many other special features. Registration is fast, simple and absolutely free so please, join our community today! If you have any problems with the registration process or your account login, please contact us. |
 |
|
|||||||
| Discuss what's fucking going on, and which programs are best and worst. One-time "program" announcements from "established" webmasters are allowed. |
|
|
Thread Tools |
09-13-2008, 07:19 PM
|
#1 |
|
Confirmed User
Industry Role:
Join Date: Aug 2003
Location: Canada
Posts: 2,310
|
javascript image effect help needed
http://www.munkgalleries.com/img/ how can i do this?
i basically want ten 50x50 thumbs on the left side then show the enlarged image on the right side when the mouse moves over the thumbnail. it should also preload an image when the page loads on the right side. |
|
|
|
09-13-2008, 09:25 PM
|
#2 |
|
Viva la vulva!
Join Date: Mar 2003
Location: you can't please everyone, so you got to please yourself
Posts: 16,557
|
 |
|
|
|
|
09-14-2008, 03:00 AM
|
#3 |
|
Confirmed User
Industry Role:
Join Date: Feb 2005
Location: US
Posts: 5,326
|
Try this:
Code:
<html>
<head>
<title>swap images</title>
<meta name="generator" content="BBEdit">
<script language="JavaScript">
<!--
function swap_main(image,name){
document.images["fullsized"].src = "images/"+image;
}
</script>
</head>
<body bgcolor="white">
<form>
<table border="0" cellpadding="0" cellspacing="0" width="310">
<tbody>
<tr align="center" valign="top">
<td height="180" width="155"><a href="javascript:swap_main('image1.jpg')"><img src="images/image1.jpg" border="1" height="150" width="100" onMousedown="swap_main('image1.jpg');"></a></td>
<br><br><br>
<td rowspan="6"> <img src="images/image3.jpg" name="fullsized" border="1" value=""></td>
</tr>
<tr>
<td height="180" width="155"><a href="javascript:swap_main('image2.jpg')"><img src="images/image2.jpg" border="1" height="150" width="100" onMousedown="swap_main('image2.jpg');"></a></td>
</tr>
<tr>
<td height="180" width="155"><a href="javascript:swap_main('image3.jpg')"><img src="images/image3.jpg" border="1" height="150" width="100" onMousedown="swap_main('image3.jpg');"></a></td>
</tr>
<tr>
<td height="180" width="155"><a href="javascript:swap_main('image4.jpg')"><img src="images/image4.jpg" border="1" height="150" width="100" onMousedown="swap_main('image4.jpg');"></a></td>
</tr>
<tr>
<td height="180" width="155"><a href="javascript:swap_main('image5.jpg')"><img src="images/image5.jpg" border="1" height="150" width="100" onMousedown="swap_main('image5.jpg');"></a></td>
</tr>
<tr>
<td height="180" width="155"><a href="javascript:swap_main('image6.jpg')"><img src="images/image6.jpg" border="1" height="150" width="100" onMousedown="swap_main('image6.jpg');"></a></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
|
|
|
|
|
09-14-2008, 12:10 PM
|
#4 |
|
Viva la vulva!
Join Date: Mar 2003
Location: you can't please everyone, so you got to please yourself
Posts: 16,557
|
I did this page as an example.
Change the image names in this script: Code:
<script type="text/javascript">
var inames = new Array("/amateur/pictures/nude-amateur-pics-0.jpg",
"/anal/pictures/xxx-anal-sex-0.jpg",
"/asian/pictures/asian-pussy-pics-0.jpg",
"/babe/pictures/naked-babe-nude-0.jpg",
"/big-tits/pictures/big-fucking-tits-0.jpg",
"/pictures/blacks/sexy-black-girl-0.jp",
"/interracial/pictures/interracial-group-sex-0.jpg",
"/latina/pictures/latina-girl-pussy-0.jpg",
"/lesbian/pictures/lesbian-sex-porn-0.jpg",
"/teen/pictures/naked-teen-nude-0.jpg");
function over(num) {
if(document.images) {
document.images["flip"].src= inames[num];
}}
function out(num) {
if(document.images) {
document.images["flip"].src= '/gfy/images/big-mikey-pimp-450.gif'; }}
</script>
Here is an example of the images you want to mouseover: Code:
<img src="http://www.mikeyddddd.com/gfy/images/mikey-likes-amateurs.gif" name="amateurs" onmouseover="over('0');" onmouseout="out('0');" width="120" height="60">
Change big-mikey-pimp-450.gif to the starting image and image you wanted displayed on mouseout. Remove the onmouseout option from the image if you want the last image displayed to remain until there is a new mouseover. |
|
|
|
|
09-14-2008, 02:47 PM
|
#5 |
|
Viva la vulva!
Join Date: Mar 2003
Location: you can't please everyone, so you got to please yourself
Posts: 16,557
|
I'm just sitting around watching football, so here's one I did for teens that matches your description.
This script will preload and display images numbered sequentially: Code:
<script type="text/javascript">
if (document.images) { // Preload images
for(i=0; i< 10; i++) {
inames[i] = new Image();
inames[i].src= "/teen/pictures/naked-teen-nude-"+[i]+".jpg";
}
}
function over(num) {
if(document.images) {
document.images["flip"].src= "/teen/pictures/naked-teen-nude-"+[num]+".jpg";
}}
function out(num) {
if(document.images) {
document.images["flip"].src= '/teen/pictures/naked-teen-nude-35.jpg'; }}
</script>
Change the initial number for "i" if you don't want to start at image numbered 0. naked-teen-nude-35.jpg is the image that will display on load and on mouseout. |
|
|
|
|
09-14-2008, 03:51 PM
|
#6 |
|
Confirmed User
Join Date: Oct 2005
Location: Boston
Posts: 929
|
you can do this with css
|
|
|
|
