/    Sign up×
Community /Pin to ProfileBookmark

Image rollover in seperate CSS box

Copy linkTweet thisAlerts:
Feb 26.2008

I have created a rollover button that works successfully but i want to add an extra part to my rollover.
I would like an image to be displayed in a seperate css box when the rollover image is displayed. (so when the mouse rolls over a button the button rollover works and an image in another css box also changes).
I think it will have to look a little like this but im rather confused as to how to go about this:
if (onMouseout) =”document.mt1.src=out1.src” load “document.file.jpg”

Any information would be of great help

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@JMRKERFeb 27.2008 — What does your initial attempt look like?

Just a sample of your code, no need for full site code.
Copy linkTweet thisAlerts:
@teagraauthorFeb 27.2008 — in the head part of my code i have this
<i>
</i>out = new Image;
over = new Image;
down = new Image;

out.src = "l5.jpg";
over.src = "l3.jpg";
down.src = "l6.jpg";

in one of the css boxes the rollover code is
<i>
</i>&lt;a alt="Rollover Code1" target="top" href="lcoks.html"
onMouseover="document.mt1.src=over1.src"
onMouseout="document.mt1.src=out1.src"
onMousedown="document.mt1.src=down1.src"
onMouseup="document.mt1.src=over1.src"&gt;

&lt;img border=0 width=500 height=90 name="mt1" src="l5.jpg"&gt;&lt;/a&gt;

I planned to write some corresonding code in a diffrent css box but im really not sure what to write im guessing it would be something like:
<i>
</i>if (onMouseover) = "document.mt1.src=over1.src" = true}
load "document.imagename.src"
Copy linkTweet thisAlerts:
@JMRKERFeb 27.2008 — Might try something like:
[code=php]
// .....
// in the <HEAD> section
function ChangeImg(ID1,ID2,imgSource) {
document.getElementById(ID1).image.src=imgSource;
document.getElementById(ID2).image.src=imgSource;
}
// .....
// in the <BODY> section
<a alt="Rollover Code1" target="top" href="lcoks.html"
onMouseover="ChangeImg('mt1','mt2','over1.src');
onMouseout="ChangeImg('mt1','mt2','out1.src')";
onMousedown="ChangeImg('mt1','mt2','down1.src')";
onMouseup="ChangeImg('mt1','mt2','up1.src')";>

<img border=0 width=500 height=90 id="mt1" name="mt1" src="l5.jpg"></a>
<img border=0 width=500 height=90 id="mt2" name="mt2" src="l5.jpg"></a>
[/code]
Modify depending upon final desired images.
Copy linkTweet thisAlerts:
@teagraauthorFeb 27.2008 — hello,

this may seem a little dense. The body obviously holds diffrent css div tags and the rollover code is inserted into one of those tags is i inserted that into that tag it would change the image but only in that same tag. How could i make it change the image in a seperate tag? would i have to repeat the "onmouseout" in the other css div tags?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transition//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<link rel="STYLESHEET" href="file:///C|/Users/Cheryl/Desktop/Documents/Documents/uni work/JAVA/travelhome.css" type="text/css">

<title>MytravelEnter</title>

<script language="JavaScript">

out = new Image;

over = new Image;

down = new Image;

out.src = "cr1.jpg";

over.src = "cr2.jpg";

down.src = "cr3.jpg";

out1 = new Image;

over1 = new Image;

down1 = new Image;

out1.src = "h1.jpg";

over1.src = "h2.jpg";

down1.src = "h3.jpg";

</script>

</head>

<body bgcolor="#000000">

<div id="body"></div>

<div id="left">

<a alt="Rollover Code" target="top" href="hawaiihome.html"

onMouseover="document.mt.src=over.src"

onMouseout="document.mt.src=out.src"

onMousedown="document.mt.src=down.src"

onMouseup="document.mt.src=over.src">

<img border=0 width=500 height=90 name="mt" src="cr1.jpg"></a>



</div>

<div id="ty">

<a alt="Rollover Code1" target="top" href="hawaiihome.html"

onMouseover="document.mt1.src=over1.src"

onMouseout="document.mt1.src=out1.src"

onMousedown="document.mt1.src=down1.src"

onMouseup="document.mt1.src=over1.src">

<img border=0 width=500 height=90 name="mt1" src="h1.jpg"></a>

</div>

<div id ="right">


</div>

</body>

</html>

So as you can see the rollover is in the ty and left boxes but i want the image change to be in the right box?

Sorry if this seems stupid
×

Success!

Help @teagra 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 5.19,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...