SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2008
    Location
    Boise, ID
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to have first thumbnail outlined onload?

    Hi. On the test page below the first thumbnail needs to start out as being outlined in orange when the page first loads, but when the other thumbnails are clicked on they become in :focus with the orange outline and the first thumbnail reverts to a grey outline.

    Is there maybe a way I can put an onload :focus on the first thumb, and then have it "deactivate" when the other thumbs are clicked on and they become in focus?

    http://www.royseeagleton.com/new/test.php

    On a side note, my current a:focus works in all browsers I've tested except for Safari. Is there a workaround for that to work in Safari?

    Thank!,
    Wesley

  2. #2
    SitePoint Zealot
    Join Date
    Mar 2008
    Location
    Asheville, NC
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i'd do two separate functions, resetThumbs() and highlightThumb(thumbId).

    resetThumbs() will be something like
    Code JavaScript:
    function resetThumbs() {
    // if borders are applied to divs just replace the tag
    var images = document.getElementsByTagName('img');
     
    for (var i=0; i<images.length; i++) {
    if (images[i].className == 'thumb') images[i].style.borderColor = 'gray';
    }
     
    }
     
    function highlightThumb(thumbId) {
    document.getElementById(thumbId).style.border = 'darkorange';
    }

    the HTML would be

    Code HTML4Strict:
    <img style="border: darkorange;" id="thumb1" onmouseover="resetThumbs(); hightlightThumb('thumb1');" onmouseout="resetThumbs();">
     
    <img id="thumb2" onmouseover="resetThumbs(); hightlightThumb('thumb2');" onmouseout="resetThumbs();">
     
    <img id="thumb3" onmouseover="resetThumbs(); hightlightThumb('thumb3');" onmouseout="resetThumbs();">

    something like that would work?

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2008
    Location
    Boise, ID
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a bunch, this definitely seems like what I need. I've inserted your coding but I'm having a little problem with the image border - although I'm sure it has to do with your note "// if borders are applied to divs just replace the tag".

    Would you have a suggestion on which way would be the best for me to apply the border to the thumbnails so that this works correctly? The ways I've tried aren't seeming to work, when the other thumbnails are clicked on the first thumbnail stays orange - not successfully resetting. I've tried border="2", style="border-color: #e85b00;", etc. I've currently removed any CSS from my external CSS file (main.css) in reference to the thumbs except I have a:hover in there so that the image outline stays orange once clicked on.

    http://www.royseeagleton.com/new/test.php

    Thanks again!,
    Wesley

  4. #4
    SitePoint Zealot
    Join Date
    Mar 2008
    Location
    Asheville, NC
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you have to apply the border to the images for it to work this way.
    also my script assumed that thumbs had class="thumb".

    change the function to

    Code JavaScript:
    function resetThumbs() {
     
    document.getElementById('thumb1').style.color = 'gray';
    document.getElementById('thumb2').style.color = 'gray';
    document.getElementById('thumb3').style.color = 'gray';
    document.getElementById('thumb4').style.color = 'gray';
    document.getElementById('thumb5').style.color = 'gray';
     
    }

    it's not the best but it should work with your current code.

    for the HTML, I'd do something like this:

    Code HTML4Strict:
    <img style="border: 2px solid darkorange;" id="thumb1" onmouseover="resetThumbs(); hightlightThumb('thumb1');" onmouseout="resetThumbs();">
    <img style="border: 2px solid gray;" id="thumb2" onmouseover="resetThumbs(); hightlightThumb('thumb2');" onmouseout="resetThumbs();">
    <img style="border: 2px solid gray;"id="thumb3" onmouseover="resetThumbs(); hightlightThumb('thumb3');" onmouseout="resetThumbs();"> 
     
    etc.......

    e.g. apply the border to the images directly instead of whatever you got now (guess the link?).

  5. #5
    SitePoint Zealot
    Join Date
    Mar 2008
    Location
    Asheville, NC
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah to keep an orange border when you click you could add a function selectThumb():
    Code JavaScript:
    function selectThumb(thumbId) {
    // reset others
    document.getElementById('thumb1').removeAttribute('id');
    document.getElementById('thumb2').removeAttribute('id');
    document.getElementById('thumb3').removeAttribute('id');
    document.getElementById('thumb4').removeAttribute('id');
    document.getElementById('thumb5').removeAttribute('id');
    // select this one
    document.getElementById(thumbId).setAttribute('id', 'selected');
    }

    add this to your CSS:

    Code CSS:
    img#selected {
    color: darkorange;
    }

    then you gotta add the onclick event to the images:
    onclick="selectThumb('thumb1');" etc etc.

  6. #6
    SitePoint Enthusiast
    Join Date
    May 2008
    Location
    Boise, ID
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Makes sense with the border!

    For my test page I've removed all the other content except just the thumbs, and placed only the img#selected CSS in the head, could you please double-check my coding, I'm receiving an "Object expected" error in IE and the mouseovers have stopped working. I'm sure it's something really simply I'm overlooking!!

    http://www.royseeagleton.com/new/test.php

    Thank you, I'm really learning a lot,
    Wesley

  7. #7
    SitePoint Zealot
    Join Date
    Mar 2008
    Location
    Asheville, NC
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ... you forgot to include highlightThumb() ;-)

  8. #8
    SitePoint Enthusiast
    Join Date
    May 2008
    Location
    Boise, ID
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I knew it was going to be something simply like that! I accidently removed that function from before, and have added back it back in. Is my code looking better? I'm afraid I'm still receiving the error. My script code now is:
    Code:
    		<script type="text/javascript">
    		function resetThumbs() {
     
    document.getElementById('thumb1').style.color = 'gray';
    document.getElementById('thumb2').style.color = 'gray';
    document.getElementById('thumb3').style.color = 'gray';
    document.getElementById('thumb4').style.color = 'gray';
    document.getElementById('thumb5').style.color = 'gray';
     
    }
    
    		function highlightThumb(thumbId) {
    document.getElementById(thumbId).style.border = 'darkorange';
    }
    
    		function selectThumb(thumbId) {
    // reset others
    document.getElementById('thumb1').removeAttribute('id');
    document.getElementById('thumb2').removeAttribute('id');
    document.getElementById('thumb3').removeAttribute('id');
    document.getElementById('thumb4').removeAttribute('id');
    document.getElementById('thumb5').removeAttribute('id');
    // select this one
    document.getElementById(thumbId).setAttribute('id', 'selected');
    }</script>
    		<style type="text/css" media="screen">
    img#selected {
    color: darkorange;
    }
    </style>
    http://www.royseeagleton.com/new/test.php

    Now that I've added in the onclick function would that be an easier route for me to go - and remove the mouseovers; that's more what I would need. Ideally when the page loads thumb1 would be hightlighted and then if the other thumbs are clicked on they highlight and only then thumb1 turns grey. Maybe something like:
    http://www.royseeagleton.com/new/test2.php

    Thanks!

  9. #9
    SitePoint Enthusiast
    Join Date
    May 2008
    Location
    Boise, ID
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops, just notice that highlightThumb('thumb1') in the HTML was spelt hightlightThumb('thumb1') having the extra "t" after 'high". I've fixed that.

  10. #10
    SitePoint Enthusiast
    Join Date
    May 2008
    Location
    Boise, ID
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry for the multiple posts!!

    Should I use .style.border instead of .style.color such as below? The mouseovers seem to work correctly, but when clicking on a thumb it highlights correctly but everything is disabled after doing so.

    Code:
    <script type="text/javascript">
    		function resetThumbs() {
     
    document.getElementById('thumb1').style.border = '2px solid gray';
    document.getElementById('thumb2').style.border = '2px solid gray';
    document.getElementById('thumb3').style.border = '2px solid gray';
    document.getElementById('thumb4').style.border = '2px solid gray';
    document.getElementById('thumb5').style.border = '2px solid gray';
     
    }
    
    		function highlightThumb(thumbId) {
    document.getElementById(thumbId).style.border = '2px solid darkorange';
    }
    
    		function selectThumb(thumbId) {
    // reset others
    document.getElementById('thumb1').removeAttribute('id');
    document.getElementById('thumb2').removeAttribute('id');
    document.getElementById('thumb3').removeAttribute('id');
    document.getElementById('thumb4').removeAttribute('id');
    document.getElementById('thumb5').removeAttribute('id');
    // select this one
    document.getElementById(thumbId).setAttribute('id', 'selected');
    }</script>
    <style type="text/css" media="screen">
    img#selected {
    color: darkorange;
    }
    </style>

  11. #11
    SitePoint Enthusiast
    Join Date
    May 2008
    Location
    Boise, ID
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    trapach, with your help with getElementById I did some reading up on it and came up with the below, I may be way off with my coding but it seems to be working in all the browsers I've tested - except Safari.

    Within the HEAD:
    Code:
    <script type="text/javascript">
    function changeClass() {
    document.getElementById("thumb1").className="thumbs";
    }
    </script>
    <style type="text/css" media="screen"><!--
    .firstthumb { border: solid 2px #darkorange; }
    .thumbs { border: solid 2px #gray; }
    a:link .thumbs { border: solid 2px #gray; }
    a:hover .thumbs { border: solid 2px #orange; }
    a:focus .thumbs, a:active .thumbs { border: solid 2px #darkorange; }
    --></style>
    Within the HTML - for the first thumbnail I inserted within the "img" tag:
    Code:
    id="thumb1" class="firstthumb"
    then for each thumbnail thereafter I inserted within the "img" tag:
    Code:
    class="thumbs" onclick="changeClass();"
    Thanks again for your help, as mentioned above, I've learned a lot,
    Wesley
    Last edited by hominid4; Jun 2, 2008 at 10:27.

  12. #12
    SitePoint Enthusiast
    Join Date
    May 2008
    Location
    Boise, ID
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This works in all browsers (recent versions anyway) plus Safari:

    Code:
    <script type="text/javascript">
    // reset highlighted thumb
    function changeClass() {
    var images = document.getElementsByTagName('img');
     
    for (var i=0; i<images.length; i++) {
    if (images[i].className == 'firstthumb') images[i].className='thumbs';
    if (images[i].className == 'activethumb') images[i].className='thumbs';
    }
     
    }
    // highlight clicked thumb
    function selectThumb(thumbId) {
    document.getElementById(thumbId).className='activethumb';
    }
    </script>
    <style type="text/css" media="screen"><!--
    .firstthumb { border: solid 2px #darkorange; }
    .thumbs { border: solid 2px #gray; }
    a:link .thumbs { border: solid 2px #gray; }
    a:hover .thumbs { border: solid 2px #orange; }
    .activethumb { border: solid 2px #darkorange; }
    --></style>
    In HTML:
    Code:
    <img id="thumb1" class="firstthumb" onclick="changeClass(); selectThumb('thumb1');"......
    <img id="thumb2" class="thumbs" onclick="changeClass(); selectThumb('thumb2');"......
    <img id="thumb3" class="thumbs" onclick="changeClass(); selectThumb('thumb3');"......
    <img id="thumb4" class="thumbs" onclick="changeClass(); selectThumb('thumb4');"......
    <img id="thumb5" class="thumbs" onclick="changeClass(); selectThumb('thumb5');"......
    Last edited by hominid4; Jun 2, 2008 at 13:01.


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
  •