/    Sign up×
Community /Pin to ProfileBookmark

Add onClick to onMouseover?

VERY new to JavaScript-currently trying to learn all that I can but I can’t figure this one out.

I started with an Image Gallery javascript (from Jeremy Keith) in order to have an onMouseover effect for a menu, at the client’s request–they wanted small moused-over pics in the menu to prompt a larger version of the photo in another column. Works great. But the href in the code, when clicked, currently links to the larger img opening in a new window. I want to add an onClick so that the user is taken to another page. Or some better way?

Here’s the JS:

[COLOR=”DarkRed”]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;
}
[/COLOR]
And here’s the code:

[COLOR=”SeaGreen”]<a onMouseover=”toggleMe(‘para1’); showPic(this); return false;” href=”images/commercial_600.jpg” title=”abcdefg”>
<img src=”images/pix_smaller3.jpg” style=”float:left” width=”70″ height=”70″></a> [/COLOR]

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@yamaharussFeb 11.2011 — If you want the user to go to the URL "images/commercial_600.jpg" when the image is clicked, simply remove the "return false;"

statement.
Copy linkTweet thisAlerts:
@tblueauthorFeb 11.2011 — Thanks for your response. Sorry I guess I wasn't clear. I want the user to go to a [B]new page[/B] when the image is [B]clicked[/B], and to show the larger image, ie "images/commercial_600.jg" when moused-over.

The way it is written, the [B]click[/B] currently goes to the URL "images/commercial_600.jpg" and the [B]mouseover[/B] shows the same img in the new column.

It seems like it should be a <a href= "newpage.html"> with a onmouseover to "images/commercial_600.jg" added differently, but I didn't write the script so I am not sure how to best go about this...

(And it is a menu with 8 links and mouseover imgs)

Any guidance is greatly appreciated!
Copy linkTweet thisAlerts:
@yamaharussFeb 11.2011 — change

showPic(this); return false;

to

showPic('images/commercial_600.jpg')

then put your URL in the href
×

Success!

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

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...