GoFuckYourself.com - Adult Webmaster Forum - javascript image effect help needed

- Fucking Around & Business Discussion (https://gfy.com/forumdisplay.php?f=26)

- - javascript image effect help needed (https://gfy.com/showthread.php?t=854886)

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.

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>

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>

The inames will be counted from 0 to the number that you define (I have 10 - from 0-9)

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">

The over values will match the inames you define as above from 0-9.

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.

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 code in the preload section for a number other than 10 images.
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.

you can do this with css