Image switch with a twist (possible??)

**jakezephyr** · 01-30-2012 02:27 PM

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

**xelawho** · 01-30-2012 04:18 PM

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>

**jakezephyr** · 01-31-2012 02:53 PM

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?

**jakezephyr** · 01-31-2012 04:02 PM

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?

**bionoid** · 01-31-2012 04:34 PM

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.

**jakezephyr** · 01-31-2012 05:22 PM

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: Image switch with a twist (possible??)

Thread Tools

Display

Image switch with a twist (possible??)

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions