SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Tab Images switch on tab menu click

    I followed along in Jeremy Keith's book "DOM Scripting" on how to make a image viewer that changes on clicking links.

    It is up for demo at: http://jojowebdesign.com/dom1.html

    My question is how can I begin to have the tab image for articles go from articles_current.gif to just articles.gif (turn off the highlight) when another tab is clicked. And the tab that is clicked has it's image switched to for example blogs_current.gif (turn on highlight).

    Using the following code framerwork.

    <script type="text/javascript">
    function showPic(whichpic) {
    var source = whichpic.getAttribute("href");
    var placeholder = document.getElementById("placeholder");
    placeholder.setAttribute("src",source);
    var text = whichpic.getAttribute("title");
    var description = document.getElementById("description");
    description.firstChild.nodeValue = text;
    }
    </script>
    </head>

    <body>
    <div style="margin: 55px;">
    <div style="margin-left: 54px; margin-top: 18px; margin-bottom: 0px;">
    <div style="float: left; width: 92px; position: relative;">
    <a href="images/screen1.jpg" onclick="showPic(this); return false;">
    <img src="/images/articles_current.gif" title="A fireworks display"/></a><br/>
    </div>

    <div style="float: left; width: 92px; position: relative;">
    <a href="images/screen2.jpg" onclick="showPic(this); return false;">
    <img src="/images/videos.gif"/></a><br/>
    </div>

    <div style="float: left; width: 92px; position: relative;">
    <a href="images/screen3.jpg" onclick="showPic(this); return false;">
    <img src="/images/blogs.gif"/></a><br/>
    </div>

    <div style="float: left; width: 92px; position: relative;">
    <a href="images/screen4.jpg" onclick="showPic(this); return false;">
    <img src="/images/search.gif"/></a><br/>
    </div>
    </div><br style="clear: both;">
    <img align="left" id="placeholder" src="/images/screen1.jpg"/><br/>
    </div>

    <br style="clear: both;" />
    <p id="description">Choose an image.</p>

  2. #2
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you add this

    Code:
    var fC=whichpic.firstChild;
    if(whichpic.firstChild.nodeType==3){fC=whichpic.firstChild.nextSibling};
      alert(fC.src);
    into showPic function alert will return you src of image, you can replace this src. But better is some image replacement for links and just change className of whichPic onclick. Technic is here http://www.wellstyled.com/css-replac...-by-image.html and here http://www.wellstyled.com/css-nopreload-rollovers.html

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey that is pretty cool.

    Would I use a very basic Javascript to Replace on the src at that point?

    Then use SetAttribute to put it back in play?

    How would I tell it to turn the old tab back to off?


    I like the idea of doing it with CSS, but I would only want active and non-active states, NO HOVER. (HOVER is kinda TIRED)..

    Would it be possible to always have the first tab ON when the page loads?

    THank you for any and all help.

  4. #4
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I cleaned up the code a little bit, I made a tab style..

    How do I replace to get the new tab to have _current added to the image name?

    <style type="text/css">
    img {
    border: 0px;
    }
    .tabs {
    float: left;
    width: 92px;
    position: relative;
    }
    </style>
    <script type="text/javascript">
    function showPic(whichpic) {
    var source = whichpic.getAttribute("href");
    var placeholder = document.getElementById("placeholder");
    placeholder.setAttribute("src",source);
    var fC = whichpic.firstChild;
    if(whichpic.firstChild.nodeType==3){fC = whichpic.firstChild.nextSibling};
    alert(fC.src);


    }
    </script>
    </head>
    <body>
    <div style="margin: 55px;">
    <div style="margin-left: 35px; margin-top: 18px; margin-bottom: 0px;">
    <div class="tabs">
    <a href="images/screen1.jpg" onclick="showPic(this); return false;" title="Articles">
    <img id="tab1" src="/images/articles_current.gif"/></a><br/>
    </div>

    <div class="tabs"">
    <a href="images/screen2.jpg" onclick="showPic(this); return false;" title="Videos">
    <img id="tab2" src="/images/videos.gif"/></a><br/>
    </div>

    <div class="tabs"">
    <a href="images/screen3.jpg" onclick="showPic(this); return false;" title="Blogs">
    <img id="tab3" src="/images/blogs.gif"/></a><br/>
    </div>

    <div class="tabs">
    <a href="images/screen4.jpg" onclick="showPic(this); return false;" title="Search">
    <img id="tab4" src="/images/search.gif"/></a><br/>
    </div>
    </div><br style="clear: both;">
    <img align="left" id="placeholder" src="/images/screen1.jpg"/><br/>
    </div>
    <br style="clear: both;" />

  5. #5
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I upload bit changed example here http://xy.wz.cz/a/ You can download it whole there, you will need 7-zip .

  6. #6
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    WOW!! That is awesome!!

    But I looked at the source and I cannot actually SEE or UNDERSTAND how your getting the _current.gif's to be used. Where is that in your code?

    Thank you.

    Dan

  7. #7
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    See simple image http://xy.wz.cz/a/images/articles_current.gif it is just changing background position.

  8. #8
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm..

    Looks like I won't be able to use your code example because I do not understand it.. so that would not be fair.

    I am missing something somewhere...

    Any other ways to do this?

    Thank you.

  9. #9
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Because this is interesting idea I uploaded there another one unobtrusive version, which works even without images and with img use just one image so when it is loaded it react immediately. http://xy.wz.cz/a/index2.html

  10. #10
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is MUCh faster, the initial load time is not bad at all.

    Are you using bg.jpg More than 1 time?

    I just cannot seem to reproduce on my end what you are doing ...

    Is there any way you can show me the individual files?

    Thank you.

  11. #11
    SitePoint Zealot
    Join Date
    Oct 2005
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh.. also, are you even using screen1.jpg thru screen4.jpg anymore?


    I would like to point out your code works in IE 6+ , FireFox 2.0+ AND Safari on the Mac!!

    Nice work!!

    Thank you.

  12. #12
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Trick is still the same you are moving one background image this one http://xy.wz.cz/a/bg.jpg

    Hope this partly commented script will help you.
    Code:
    function defPos(){
    var ar=document.getElementById('keeper'); //choose area where script will works
    var al=ar.getElementsByTagName('em'); //choose lements on which script will work
    for(var i=0;i<al.length;i++){ //make an array from this elements
    al[i].style.backgroundPosition=-((i*92)+37)+'px 0';
    //set defaule position, each tab is 92px width so move each one to appropriate positon
    //this array contains 4 elements em, every one is 92px width, it is set by css
    //this script is here to set them to default position
    /* in css it is this part
    a#tab1 em{background-position:-37px 0;}
    a#tab2 em{background-position: -129px 0;}
    a#tab3 em{background-position: -221px 0;}
    a#tab4 em{background-position: -313px 0;}
    */
    }
    }
    function init(){
    var ar=document.getElementById('keeper'); // again choose area where script should work
    var al=ar.getElementsByTagName('a'); // now we choose element a
    for(var i=0;i<al.length;i++){ // make an array from a elements
    al[0].lastChild.style.backgroundPosition='-37px -22px';
    // set first em background to position onload
    // em is lastChild of each a element
    // al[0] is first a element in created array
    // the same is in css this a#tab1 em{background-position:-37px -22px;}
    var rl=al[i].getAttribute('href'); // pickup value of href from a elements
    al[i].setAttribute('rel',rl); // set attribute rel and leave in this attribute hrefs which you picked up before
    al[i].setAttribute('rev',i); // create an attribute rev and put there i, it is order in array (number)
    al[i].removeAttribute('href'); // remove all href, you don't need them more, they are in rel attribute and you will not have to use reurn false, it makes problems in firefox with some addons
    al[i].onclick=function(){ // call function when you click href
    n=-((this.getAttribute('rev')*92)+37);// variable pickup rev attribute and times it by width of tab (37 means it is moved to center on bg.jpg)
    m=-44-(this.getAttribute('rev')*362); // variable pickup rev attribute and times it by height of div 362px it is the same as beginning pictures height, 44 is height of active and inactive tab 2*22px
    defPos(); // set deafault position of tabs
    this.lastChild.style.backgroundPosition=n+'px -22px'; // set position of clicked tab to  em{background-position:variable -22px;} it will be dark blue
    document.getElementById("desc").firstChild.nodeValue=this.title; // set description from href title
    document.getElementById('ph').style.backgroundPosition='0 '+m+'px'; // set bacground image of div#ph counted from attribute rev times by begining height + height of tabs
    };
    }
    }
    window.onload=function(){init();};


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
  •