41 users online (0 members and 41 guests)  


  Results 1 to 10 of 10

Related

  1. Changing z-index etc. by clicking a button    Forum: Javascript Forum
    Replies: 2
  2. Replies: 1
  3. Picture & picture underneath    Forum: Myspace Forum
    Replies: 1
  4. Replies: 4
  1. #1
    BigWalder's Avatar
    New User

    Status
    Offline
    Join Date
    Sep 2002
    Posts
    11

    Changing a picture by clicking it

    How do you do this? I've been searching the web, but it's a hard thing to pinpoint. I want to have a page with a picture in the center. I want to be able to click the picture and have it change to a different picture.

  2. #2
    ianru's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Sep 2002
    Posts
    61
    Java script can do that, here is the srcipt, and it is called a rollover i think or something...

    SCRIPT LANGUAGE = "JavaScript">

    <!-- hide

    browserName = navigator.appName;
    browserVer = parseInt(navigator.appVersion);
    browser = "NotOk";



    if (browserName == "Netscape" && browserVer >= 3) { browser = "ok"}
    if (browserName == "Microsoft Internet Explorer" && browserVer >= 4) { browser = "ok"}


    if (browser == "ok") {


    Link1= new Image(); Link1.src = "The original Image";
    Link1on = new Image(); Link1on.src = "THe second Image";

    }

    function swap(imgName,select)

    { if (browser == "ok") {imgOn = eval(select+ ".src");
    document.images[imgName].src = imgOn; }}

    </SCRIPT >

    The code below is the actual HTML code for each image. You can format the apperance or layout of the images using tables.

    <a href="your link"
    onmouseover="swap('imgLink1','Link1on')"
    onmouseout="swap('imgLink1','Link1')">
    <img name ="imgLink1"
    src= "The original Image" border = 0 alt = "The original Image"><br></a>


    If you have any problems just ask here!

  3. #3
    geek987's Avatar
    Man Utd Fans

    Status
    Offline
    Join Date
    Apr 2002
    Location
    Canada
    Posts
    156
    the code is correct but not 4 the request
    i think he wants it onClick istead of onMouseover
    i ain't a genius at this, so someone plz help him

  4. #4
    ianru's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Sep 2002
    Posts
    61
    Oh damn, lol, i gto the scipt all wrong....



    Well i don't really see how much there is to change, just change instead of onMousover make it onClick, though i am not a geniuse at this either!

  5. #5
    benzden's Avatar
    Senior Member

    Status
    Offline
    Join Date
    Feb 2002
    Location
    San Antonio, Texas
    Posts
    652
    Are you looking for something like what's being done at

    http://dpw.gumint.com

    ?

  6. #6
    BigWalder's Avatar
    New User

    Status
    Offline
    Join Date
    Sep 2002
    Posts
    11
    yes, like that, only preferably, after the picture was clicked, you could click the new picture and it would go back to the origional. I'll try out the script posted above and tell you guys how it works

  7. #7
    DreamingGirl's Avatar
    New User

    Status
    Offline
    Join Date
    Aug 2002
    Posts
    11
    That's the code I need.... but I can't figure out what to change to make it work!!! Anyone can?

  8. #8
    benzden's Avatar
    Senior Member

    Status
    Offline
    Join Date
    Feb 2002
    Location
    San Antonio, Texas
    Posts
    652

    function showupdate(photoIndex, dummy) {
    document['bigPhoto'].src = objimage[photoIndex];
    }
    is the funciton in the .js file


    <SCRIPT LANGUAGE="JavaScript"><!--
    objimage = new Array(2);

    objimage[1]= "i/house-e.jpg"
    objimage[2]= "i/house-n.jpg"
    objimage[3]= "i/house-s.jpg"
    ...
    // -->
    </SCRIPT>
    is in the .htm file 'after' the </body></HTML>

    and


    <A HREF="javascript: showupdate(1,0)"><IMG ALT="default photo" BORDER=0
    NAME=bigPhoto SRC=i/house-e.jpg></A>
    is the action
    coding in the same .htm file where the default image reappears whenever the new image shown in its place is clicked. Couldn't be simpler. I use it at dozens of web sites.

  9. #9
    BigWalder's Avatar
    New User

    Status
    Offline
    Join Date
    Sep 2002
    Posts
    11
    Actually, I figured it out by looking at the source of your garbage page, while the webmaster forums was down. Thanks for the help!

  10. #10
    DreamingGirl's Avatar
    New User

    Status
    Offline
    Join Date
    Aug 2002
    Posts
    11
    sure... worked thanks



Tags for this Thread