www.webdeveloper.com
Results 1 to 6 of 6

Thread: Image switch with a twist (possible??)

  1. #1
    Join Date
    Jan 2012
    Posts
    4

    Question Image switch with a twist (possible??)

    What an amazing resource this website is!

    I have been lurking and learning but I have reached a roadblock and I don't have enough knowledge to get around it.

    I have three images on my homepage that I intend to use as main navigation. I have three variations of each: desaturated (b&w), gaussian blur, and full-color. I want them all to be grayscale by default, colored when hovered-over and, when one is hovered-over, I want the other two to be blurred out, imitating depth of field.

    Javascript seems the only resource capable of such a task, and I understand conceptually how I could order these operations, but I can't find the right syntax to make it happen.

    Any ideas?? (Thank you in advance!!)

  2. #2
    Join Date
    Nov 2010
    Posts
    1,082
    here's one way to do it, if I understand correctly. It's untested, but it should work. You will need to name your pics like this:

    let me know if there's a snag.

    black & whites: leftbw.jpg, midbw.jpg, rightbw.jpg
    colors: leftcol.jpg, midcol.jpg, rightcol.jpg
    blurs: leftblr.jpg, midblr.jpg, rightblr.jpg

    Code:
    <html>
    <head>
    <title>
    </title>
    <style>
    .line{
    display:inline;
    	}
    </style>
    </head>
    
    <body>
    <img class="line" id="left" src="leftbw.jpg" onmouseover="over(this)" onmouseout="out()"/>
    <img class="line" id="mid" src="midbw.jpg" onmouseover="over(this)" onmouseout="out()"/>
    <img class="line" id="right" src="rightbw.jpg" onmouseover="over(this)" onmouseout="out()"/>
    <script  type="text/javascript">
    pics=document.getElementsByTagName("img")
    
    function over(img){
    for ( x = 0; x < pics.length; x++ ){
    if(pics[x].id==img.id){
    pics[x].src=pics[x].id+"col.jpg"
    } else {
    pics[x].src=pics[x].id+"blr.jpg"
    	}
    }
    
    function out(){
    for ( y = 0; y < pics.length; y++ ){
    pics[y].src=pics[y].id+"bw.jpg"
    }
    </script>
    
    </body>
    </html>

  3. #3
    Join Date
    Jan 2012
    Posts
    4
    Alright, so I've spent the last 24 hours trying to dissect that snippet and understand it (completely new to javascript) and in my implementation I still get no reaction. Do I have to preload the images somewhere? I am currently doing this without uploading all the files to the server...just trying to get it to work out of the folder on Chrome.

    Here is my exact code (I started a new html document to try and eliminate all other variables):

    Code:
    <html>
    <head>
    <title>
    </title>
    <style>
    .line{
    display:inline;
    	}
    </style>
    </head>
    
    <body>
    <a href="Test.html"><img class="line" id="left" src="leftbw.jpg" onmouseover="over(this)" onmouseout="out()"/></a>
    <a href="Test.html"><img class="line" id="mid" src="midbw.jpg" onmouseover="over(this)" onmouseout="out()"/></a>
    <a href="Test.html"><img class="line" id="right" src="rightbw.jpg" onmouseover="over(this)" onmouseout="out()"/></a>
    <script  type="text/javascript">
    pics=document.getElementsByTagName("img")
    
    function over(img){
    for ( x = 0; x < pics.length; x++ ){
    if(pics[x].id==img.id){
    pics[x].src=pics[x].id+"col.jpg"
    } else {
    pics[x].src=pics[x].id+"blr.jpg"
    	}
    }
    
    function out(){
    for ( y = 0; y < pics.length; y++ ){
    pics[y].src=pics[y].id+"bw.jpg"
    }
    </script>
    
    </body>
    </html>
    While dissecting I tried to personalize the code by using all my existing filenames and editing the code to comply, but it didn't work, so I started back at square 1 and renamed my files to comply with the given code. From my limited knowledge (but decent research) this seems to all check out, but there is no visible result (the images stay b&w the entire time, no change on mouseover or otherwise).

    What should I try next?

  4. #4
    Join Date
    Jan 2012
    Posts
    4
    Okay, I responded a bit ago but it said it required moderator approval (I'm guessing due to the code tags I used).

    The code seems like it should work (with my limited knowledge) and I have tried to troubleshoot it best I knew how. I created a fresh html doc using the above snippet, moved my files (images) and adjusted their names to match.

    When I load it into Chrome, I see the bw images but no effect on rollover or otherwise. I even tried embedding them in "a href" tags to make them clickable links but to no avail.

    Do the images need to be cached somehow by the html document before I try to use them with javascript? What else should I try?

  5. #5
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    My turn. Using the same naming convention as xelawho:

    black & whites: leftbw.jpg, midbw.jpg, rightbw.jpg
    colors: leftcol.jpg, midcol.jpg, rightcol.jpg
    blurs: leftblr.jpg, midblr.jpg, rightblr.jpg
    Code:
    <img id="left"  src="" alt="" />
    <img id="mid"   src="" alt="" />
    <img id="right" src="" alt="" />
    
    <script type="text/javascript">
    
    	(function(img)
    	{
    		var i, j = img.length;
    		function over() {var i; for (i = 0; i < j; i++) {img[i].src = img[i].id + (img[i] === this ? 'col' : 'blr') + '.jpg';}}
    		function  out() {var i; for (i = 0; i < j; i++) {img[i].src = img[i].id + 'bw.jpg';}}
    		                        for (i = 0; i < j; i++) {img[i] = document.getElementById(img[i]); img[i].onmouseover = over; img[i].onmouseout = out;} out();
    	}
    	(['left', 'mid', 'right']));
    
    </script>
    Code has been tested using dummy images.
    Last edited by bionoid; 01-31-2012 at 04:40 PM.
    JavaScript: Learn | Validate | Compact | bionoid

  6. #6
    Join Date
    Jan 2012
    Posts
    4
    Ahahaha cool! Thank you so much!!!

    Alright, now to spend the rest of the day figuring out what each element means before actually using it for my own site.

    Thank you, to both of you, I really appreciate your help!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles