navigation
a webmaster learning community
     Home    Register     Search      Help      Login    
Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums
 

Advanced search
Recent Posts

 Todays Posts
 Most Active posts
 Posts since last visit
 My Recent Posts
 Mark posts read

Microsoft MVP

 

mouseover image change

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Microsoft FrontPage Help >> mouseover image change
Page: [1]
 
jaketb14

 

Posts: 2
Joined: 3/9/2008
Status: offline

 
mouseover image change - 3/9/2008 4:55:13   
Hey guys!

I just made this header, and I want to get it operational, but, unfortunately, I'm having some trouble. I made the image into an image map, (over the 4 links) but I can't seem to figure out how to get the onmousover tag to work. I tried img scr="www.xxxx.com", but that obviously didn't work! here's the main image :) and the images I want to replace it with over the respected mouseovers

:)

:)

:)

:)

thx in advance!

Jake
jaketb14

 

Posts: 2
Joined: 3/9/2008
Status: offline

 
RE: mouseover image change - 3/9/2008 5:49:17   
nvr mind guys, i figured it out, here's wat I did:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
.style1 {
margin-bottom: 0px;
}
</style>
</head>

<body>

<SCRIPT LANGUAGE="javascript">

Image1 = new Image(355,600)
Image1.src = "tester.jpg"

Image2 = new Image(355,600)
Image2.src = "link_this.jpg"

Image3 = new Image(355,600)
Image3.src = "link_is.jpg"

Image4 = new Image(355,600)
Image4.src = "link_a.jpg"

Image5 = new Image(355,600)
Image5.src = "link_test.jpg"

</SCRIPT>

<IMG NAME="emp" SRC="tester.jpg" USEMAP="#ep" class="style1" />

<SCRIPT LANGUAGE="javascript">

function zoomin() {
document.emp.src = Image5.src; return true;
}

function zoomout() {
document.emp.src = Image4.src; return true;
}

function zoomup() {
document.emp.src = Image3.src; return true;
}

function zoomdown() {
document.emp.src = Image2.src; return true;
}

function original() {
document.emp.src = Image1.src; return true;
}

</SCRIPT>

<MAP NAME="ep">

<AREA SHAPE="rect" ALT="Enlarged right side" COORDS="129, 289, 196, 334" HREF="link_this.jpg" onMouseOver="zoomdown()" onMouseOut="original()" />

<AREA SHAPE="rect" ALT="Enlarged right side" COORDS="309, 292, 393, 333" HREF="link_a.jpg" onMouseOver="zoomout()" onMouseOut="original()" />

<AREA SHAPE="rect" ALT="Enlarged right side" COORDS="210, 288, 295, 334" HREF="link_is.jpg" onMouseOver="zoomup()" onMouseOut="original()" />

<AREA SHAPE="rect" ALT="Enlarged right side" COORDS="406, 292, 477, 333" HREF="link_test.jpg" onMouseOver="zoomin()" onMouseOut="original()" />


<AREA SHAPE="default" nohref="" />

</MAP>
</body>

</html>

(in reply to jaketb14)
Page:   [1]

All Forums >> Web Development >> Microsoft FrontPage Help >> mouseover image change
Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts