javascript image effect help needed

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • eMonk
    Confirmed User
    • Aug 2003
    • 2310
    #1

    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.
    Tags: None
    • mikeyddddd
      Viva la vulva!
      • Mar 2003
      • 16557
      #2


        Comment

        • Dvae
          Confirmed User
          • Feb 2005
          • 5326
          #3
          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>
          .
          .

          Arguing with a troll is a lot like wrestling in the mud with a pig, after a couple of hours you realize the pig likes it.

            Comment

            • mikeyddddd
              Viva la vulva!
              • Mar 2003
              • 16557
              #4
              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.

                Comment

                • mikeyddddd
                  Viva la vulva!
                  • Mar 2003
                  • 16557
                  #5
                  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.

                    Comment

                    • bashbug
                      Confirmed User
                      • Oct 2005
                      • 929
                      #6
                      you can do this with css

                        Comment

                        Previous template Next
                        Working...