Is Javascript stackable?

August 12, 2007 7:22 PM

Can Javascript be "stacked" to do an onmouseover AND a popup window all on the one link?

I'm building a website for a friend. I'm pretty good with HTML, but anything I do beyond that (asp, cgi, php, etc) consists of finding snippets of code on the web and molding it to do what I want. In this case, I want to do an onmouseover to swap one image for another, AND open a popup window when the image is clicked. I have the code to do each - but is it possible to put it all together? Here are the snippets of Javascript:

the mouseover:
http://www.daniweb.com/forums/post59235-2.html

the popup:
http://www.yourhtmlsource.com/javascript/popupwindows.html

Thanks in advance!

posted by andihazelwood to Technology (10 answers total)

It should work. Why not just put them together and try it?
posted by stopgap at 7:25 PM on August 12, 2007

Better yes, do the rollover in CSS and the popup in js.
posted by IronLizard at 7:32 PM on August 12, 2007

Here's a couple of examples.
posted by IronLizard at 7:34 PM on August 12, 2007

Response by poster: I guess the specific problem is I don't know *how*. Where do the " and ' and ( and ) go? Should it look like this?

< a href="[filtered]poptastic('link'); onmouseover=" document.image.src='image2'" onmouseout=" document.image.src='image'" "> < image name="image">

I think that's missing a " but I don't know where to put it.
posted by andihazelwood at 7:36 PM on August 12, 2007

Response by poster: holy cow I didn't know you could do rollovers in CSS. So much reading to do...
posted by andihazelwood at 7:37 PM on August 12, 2007

You should checkout mootools if you want to do spiffy tuff in JS.
mootools.net

And yes, CSS is also awesome :)
posted by jesirose at 7:38 PM on August 12, 2007

Should it look like this?

< a href="[filtered]poptastic('link'); onmouseover=" document.image.src='image2'" onmouseout=" document.image.src='image'" "> < image name="image">

Um... yes?

Or you could do:


< a href="#"; onmouseover=" document.image.src='image2'" onmouseout=" document.image.src='image'" onmousedown="pop('link')" "> < image name="image">
posted by delmoi at 7:41 PM on August 12, 2007

Your example is missing a " after "[filtered]poptastic('link');

Which means you've probably also got an extra " at the end...
posted by Pinback at 7:45 PM on August 12, 2007

Response by poster: thanks for that pinback, by putting in that " I was able to get it to work!

I'm gonna try delmoi's way and Iron Lizard's way too.

Thanks all for the assist.
posted by andihazelwood at 7:54 PM on August 12, 2007

Seriously, look at CSS for the rollover effect. Using images for rolling over links is something that has been (thankfully) on it's way out for a number of years now.

Also, take a look at the Javascript Events that are available for inline elements (the a, or anchor tag is an inline element).

As for "stackable", Javascript is incredibly powerful. If you want to combine two or more actions into a single event handler (say, onclick or onmousedown as per delmoi's example above) simply make a function:

function action {
document.image.src = 'image2';
window.open ("http://www.yoururl.com","mywindow","status=1");
}

Then attach it to an event:

<a href="/your/action/here" onclick="action()">link</a>
posted by purephase at 4:57 AM on August 13, 2007