How to go to URL onclick when HREF is already owned by onmouseover?

the latest newbie question

[Don_Hoagie]

This seems like/possibly is a pretty asinine question...

I am using this script that creates a remote rollover image gallery. What i'd like to do is have the onmouseover show the remote image, and the onclick go to a somewhat unrelated url... but I can't seem to figure out a way to do that cleanly, given that the script by default takes ownership of HREF as the remote image to show onmouseover.

function showPic (whichpic) {
if (document.getElementById) {
document.getElementById('highlight').src = whichpic.href;
return false;
} else {
return true;
}
}

<a onmouseover="return showPic(this)" href="example.jpg">John Doe's Site</a>

Being JS illiterate, I tried some simple yet uneducated tactics, like changing the HREF to the URL I want, and then changing showPic(this) to showPic('http://www.example.com/example.jpg')... that didn't work. Right now i'm resorting to using ANOTHER script to pop up the URL in a new window... I'm sure it's a much dirtier solution than necessary, and i'd like to clean it up. So perhaps the simple question here is, how do you make a link to somewhere onclick when it already uses the HREF for onmouseover?

Thanks for any assistance

[JAB Creations]

I can't provide a full script but I can provide a partial concept at least...

<a href="#" onmouseover="" onmousedown="">link</a>

Perhaps set some functions for each event?

[Don_Hoagie]

Thanks for your reply.

Well from the looks if it, that seems to be adding another healthy dose of javascript, which i'd like to avoid. I was hoping there was just some syntax in javascript that I was unaware of which allows a "go to url" command, like onclick="'http://www.example.com'" or something... is there nothing like this?

[Bernard Marx]

<edit>

how do you make a link to somewhere onclick when it already uses the HREF for onmouseover?

Sounds dodgy! I would give the destination URL back to the

href

(where it belongs).

If I understand correctly, I'd do what you've already tried - sending the image URL as the argument to the function - but the function will need to be amended very slightly.
(I'm not sure what purpose all the return values serve, so I'm cutting 'em out)

--------JS------------
function showPic(imgSrc) 
{ 
   if (document.getElementById)
        document.getElementById('highlight').src = imgSrc; 
}
--------HTML----------
<a href="http://www.example.com" 
 onmouseover="showPic('http://www.example.com/example.jpg')">
John Doe's Site</a> 
----------------------

What happens onmouseout, Don?

[Don_Hoagie]

Well, onmouseout takes you to a URL which negates the onmouseover URL, effectively causing an infinite loop which will eventually manifest itself as a tear in the time-space continuum...

Heh, actually Bernard, it's a very benign application. I basically created a gateway page with an 8-item CSS nav menu, each item corresponding to an individual division of the company. These companies are not instantly recognizable by name, but are recognizable by images... hence having a remote rollover for the nav that will cause the underlying background image to change according to the division selected. Of course, the user actually has to be able to GO to the division's site, which is why I need the onclick as well.

Ah, your solution worked! I guess it was that the JS was looking a little too specifically for something... thanks for the fix! I see how easy this was for you though... I really need to figure out JS. But, then I wouldn't have time to watch my Murder She Wrote DVD box set.

[Bernard Marx]

With a little practice, you'll soon be a the stage where you can code your script and watch telly at the same time. Just like yours truly.

Seeing as these are (kind of) rollovers, I suppose you're preloading the company images?

[Don_Hoagie]

Sure am... got anything to say about this script? Once again, not mine... but this one does seem to work fine and dandy for my cause. The page is coming together nicely, thanks to some help from you all at WebmasterWorld.

var dealershipimages=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
dealershipimages[i]=new Image()
dealershipimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("example.jpg, etc")

[Bernard Marx]

If it works, it works. So there's no reason to change it.

anything to say

Well, since you ask..

1) In a perfect world, I'd fiddle around a bit so that the resulting images array isn't hard-coded into the function. You may want to refer to two or more sets of images at some point.

2)

preloadImages.arguments

The arguments array is deprecated as a property of the function (leaving the usual forward-backward compatibility quandary).

arguments

is now an automatic local variable in all functions.

-----------------------
Here's the kind of pattern I use
(though I'm not suggesting you need to change).

var dealershipimages = 
[
  "example1.jpg",
  "example2.jpg"
]
[color=brown]/* Optionally take out common path component
 and declare a 'base' property for the array 
eg: */[/color]
 
dealershipimages.base = "images/dealership/";
preloadArray(dealershipimages);
[color=brown]/* change corrupted [b][red]¦¦[/red][/b] chars for pipes */[/color]
function preloadArray(srcs)
{
  base = srcs.base ¦¦ '';
  for(var k=0;k<srcs.length;k++)
    (srcs[k] = new Image).src = base + srcs[k];
}