Image switch with a twist (possible??)

@jakezephyrJan 30.2012

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!!)

to post a comment

JavaScript

5 Comments(s) _↴

@xelawhoJan 30.2012 — #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>[/CODE]

@jakezephyrauthorJan 31.2012 — #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>[/CODE]

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?

@jakezephyrauthorJan 31.2012 — #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?

@bionoidJan 31.2012 — #My turn. Using the same naming convention as xelawho:

black & whites: [B]leftbw.jpg[/B], [B]midbw.jpg[/B], [B]rightbw.jpg[/B]

colors: [B]leftcol.jpg[/B], [B]midcol.jpg[/B], [B]rightcol.jpg[/B]

blurs: [B]leftblr.jpg[/B], [B]midblr.jpg[/B], [B]rightblr.jpg[/B][/QUOTE]

[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]

Code has been tested using dummy images.

@jakezephyrauthorJan 31.2012 — #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!

Also in #JavaScript _↴

Interest Inventory Needs Refining searchhing criteria on multiple checkboxes Javasripct wait cursor problem

Success!

Help @jakezephyr spread the word by sharing this article on Twitter...

Tweet This

Image switch with a twist (possible??)

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Image switch with a twist (possible??)

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴