onmouseover script not working with link to new page

[valday]

New to JavaScript so PLEASE bear with me. Trying hard to learn. My client specifically asked for a type of menu (scroll over a thumbnail and you see a large photo in the column next to it. And of course the thumbnail is clickable to new page. I am using this Jeremy Keith script:


/* This script and many more are available free online at
The JavaScript Source!!

http://javascript.internet.com

Created by: Jeremy Keith / Anonymous |

http://www.alistapart.com/articles/imagegallery/

*/
function showPic(whichpic) {
if (document.getElementById) {
document.getElementById('placeholder').src = whichpic.href;
if (whichpic.title) {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
} else {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}
return false;
} else {
return true;
}
}

var previousToggle=null;
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block";
if(previousToggle)previousToggle.style.display="none";
previousToggle=e;
}
return true;
}

and it works fine, except that I can't figure out how to make it showpic on mouseover and still go to new URL (basic link to a page) onclick.

Here's a link (one of 8)in the body:

<a onmouseover="toggleMe('para1'); showPic(this); return false;" href="design.html.jpg" title="blah blah blah">
<img src="images/pix_smaller3.jpg" style="float:left" width="70" height="70"></a>

It either links to new page with the href="design.html", or swaps in larger pic if I href to the img file, but I can't seem to get BOTH to work. I obviously want the <a> to be to a new page, not the larger img. Shouldn't showPic take care of this? Where is showPic getting its imgs from?

I know that this can't be that complicated, but I have been up for 2 nights trying to figure this out. Any help appreciated...

 

[valday]

Whoops! that's a typo in there-- the href="design.html.jpg"

Should be design.html

 

[vacunita]

The function uses the link's href to set the larger picture's src.

If you change the href to an HTML file, then its no longer a valid picture, so it won't show.

  document.getElementById('placeholder').src = whichpic.href;

You can do several things:

1. Dynamically create the large image's src file from the thumbnail's file name.


2. Point the href attribute to the larger images directly.

3. Craft your function such that you can pass the large image name to it to be used.

Using number 3 as a basis, I would do it like this:

function showPic(picSrc,picTitle){
if (document.getElementById) {
    document.getElementById('placeholder').src = picSrc;
    if (picTitle) {
      document.getElementById('desc').childNodes[0].nodeValue = picTitle;
    } else {
      document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
    }
    return false;
  } else {
  return true;
  }
}


...

<a onmouseover="toggleMe('para1'); showPic('image.jpg','title for this image'); return false;"  href="design.html.jpg" title="blah blah blah">

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[valday]

After struggling through 15-20 different methods, answers, attempts, theories and hacks, you DID IT! Would it be inappropriate to say I LOVE YOU?? I can't tell you how much angst I have had over this. AND it works in all browsers. I honestly can't say I understand exactly how it works but I am going to go with it...
THANK YOU so so much!


BTW:
"2. Point the href attribute to the larger images directly."
If I do this, it doesn't work as link to a new page.

And if you have a minute, could you explain #1?


THANKS!

 

[valday]

Do I understand this correctly: I can now get rid of the toggleMe function? The picTitle suffices. I don't need any more than that. (the toggleMe had a paragraph parameter)So clean and simple.



var previousToggle=null;
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block";
if(previousToggle)previousToggle.style.display="none";
previousToggle=e;
}
return true;
}

 

[vacunita]

BTW:
"2. Point the href attribute to the larger images directly."
If I do this, it doesn't work as link to a new page.

It would open the large images in the browser by themselves. However if you need an html based page were you display the pictures, then yes it would not work.

And if you have a minute, could you explain #1?

It means you can use part of the thumbnail's image filename to create the large file name.

for instance if the thumbnail filename is picture1_thumb.jpg you could extract the "picture1" and use that as your source, assuming of course the large picture has a file name of picture1.jpg or something similar.

the toggleMe function simply shows or hides an object with an ID of "para1" its in no way related to the title property. Whether you need it or not, only you can know. As only you would know what its showing and hiding. As a guess, I'm inclined to say it hides or shows the element that has the large image tag.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[tsuji]

Please do not use red/bold or the sort in a prolonged block of message. It is unreadable.