SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    newbie - rollover gallery

    Hi - I am new to javascript. I am trying to create a rollover gallery (mouseover thumbnails - image enlarges in center of same page). Could someone please give me the details/exact script on how to do this???
    Can you use jpg or does it have to be gif?

    Thanks

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,499
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have anumber of scripts which may be of interest

    http://www.vicsjavascripts.org.uk/Im...ImagePopUp.htm

    http://www.vicsjavascripts.org.uk/Ba...hSlideShow.htm

    http://www.vicsjavascripts.org.uk/Th...ailDisplay.htm

    If any of these are of interest but tou need modification, let me know

  3. #3
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for replying! But what I want to do is to have a grouping of thumbnails on the left of the screen with a large image in the center. When you put your mouse on any of the image that image appears in the larger center box. (mouseover/ rollover gallery)

    I have the script to do it, but when I tried the script appeared on the published page along with the pics and there was no "mouse-over action".

    Do my images need to be gif rather than jpeg?

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,499
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    jpg are fine

    post you code and Ill sort it

    mean while I'll produce an example


    very quickly

    PHP Code:
    <html>

    <
    head>
    <
    title>No title</title>
    <
    meta name="generator" content="Namo WebEditor v5.0">
    </
    head>

    <
    body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
    <
    pWorks the same using .jpg files</p>
    <
    table border="1" style="text-Align:center;" >
        <
    tr>
            <
    td width="100">
                <
    img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width=100 height=50
                 onclick
    ="javascript:document.getElementById('Main').src='http://www.vicsjavascripts.org.uk/StdImages/One.gif'" >
            </
    td>
            <
    td width="300" rowspan="4">
                <
    img id="Main" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width=300 height=300 >
            </
    td>
        </
    tr>
        <
    tr>
            <
    td>
                <
    img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width=100 height=50
                 onclick
    ="javascript:document.getElementById('Main').src='http://www.vicsjavascripts.org.uk/StdImages/Two.gif'" >
            </
    td>
        </
    tr>
        <
    tr>
            <
    td>
                <
    img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width=100 height=50
                 onclick
    ="javascript:document.getElementById('Main').src='http://www.vicsjavascripts.org.uk/StdImages/Three.gif'" >
            </
    td>
        </
    tr>
        <
    tr>
            <
    td>
                <
    img src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" width=100 height=50
                 onclick
    ="javascript:document.getElementById('Main').src='http://www.vicsjavascripts.org.uk/StdImages/Four.gif'" >
            </
    td>
        </
    tr>
    </
    table>
    <
    p>&nbsp;</p>
    </
    body>

    </
    html

  5. #5
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    replace all onclick= with onmouseover= and you have what you want

  6. #6
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,499
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks jim

    photo finesse
    to try and make up for previous missunderstanding this may be of interest



    PHP Code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"
    >

    <
    html>

    <
    head>
      <
    title></title>
    <
    script language="JavaScript" type="text/javascript">
    <!--
    function 
    swap(obj,overimg,main,mainimg){
     
    obj.outimage=obj.src;
     
    obj.src=overimg;
     
    document.getElementById(main).src=mainimg;
     
    obj.onmouseout=function(){
                     
    this.src=obj.outimage;
     }
    }
    //-->
    </script>

    </head>

    <body>
     <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width=100 height=50
      onmouseover="javascript:swap(this,'http://www.vicsjavascripts.org.uk/StdImages/Three.gif','Main','http://www.vicsjavascripts.org.uk/StdImages/One.gif');" >
     <br>
     <img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width=100 height=50
      onmouseover="javascript:swap(this,'http://www.vicsjavascripts.org.uk/StdImages/Four.gif','Main','http://www.vicsjavascripts.org.uk/StdImages/Two.gif');" >
     <br>
      <img id="Main" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width=200 height=200>

    </body>

    </html> 

  7. #7
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    newbie - rollover gallery

    This should do the trick.


    <SCRIPT LANGUAGE="JavaScript">
    <!-- this preloads your images so the effect will be instantanious -->
    <!-- these are your large images -->
    {
    alt0 = new Image();
    alt0.src = "1stlarge.jpg";

    alt1 = new Image();
    alt1.src = "nextlarge.jpg";

    alt2 = new Image();
    alt2.src = "nextlarge.jpg";
    <!-- put additional large images here just like above -->


    <!-- these are your thumbnails -->
    graphic1= new Image();
    graphic1.src = "1stthumb-as-it-should-look-onmouseover.gif";
    graphic1on = new Image();
    graphic1on.src = "1sthumb.gif";

    graphic2= new Image();
    graphic2.src = "nextthumb-as-it-should-look-onmouseover.gif";
    graphic2on = new Image();
    graphic2on.src = "nextthumb.gif";
    <!-- put additional thumbnails here just like above -->


    <!-- this is the function that flips the images -->
    }
    function imageChange(imageID,imageName,imageID2,imageName2) {

    {
    document.images[imageID].src = eval(imageName + ".src");
    document.images[imageID2].src = eval(imageName2 + ".src");
    }

    }

    </SCRIPT>


    <!-- just a table to lay everything out nice and neat, you'll have to -->
    <!-- position every thing the way you want it -->
    <center>
    <TABLE border="0">
    <TR>
    <TD>

    <!-- calls for the function when you mouseover the thumbnails -->
    <A HREF="whateveryouwanttolinkto"
    onMouseOver="imageChange('global','alt1','one','graphic1on')"
    onMouseOut="imageChange('global','alt0','one','graphic1')">
    <IMG SRC="1stthumb.gif" BORDER="0" NAME="one"></A>


    <BR><BR>
    <!-- ditto for the second one -->
    <A HREF="whateveryouwanttolinkto"
    onMouseOver="imageChange('global','alt2','two','graphic2on')"
    onMouseOut="imageChange('global','alt0','two','graphic2')">
    <IMG SRC="nextthumb.gif" BORDER="0" NAME="two"></A>

    <!-- add as many calls here as you have thumbnails -->
    I have two thumbnails, so I did two I kill me

    </TD>

    <TD>

    <!-- this will put the first image in place when your page loads -->

    <IMG SRC="1stlarge.jpg" WIDTH="130" HEIGHT="130" NAME="global">


    </TD>
    </TR>
    </TABLE>
    </center>


    Enjoy.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •