/    Sign up×
Community /Pin to ProfileBookmark

Onmouseover / Hover for different divs?

Copy linkTweet thisAlerts:
Jun 30.2010

Hi there everyone,
unfortunately I don’t know anything/very much about scripting and since I usually don’t need to I also haven’t learned it so far…
Sometimes I just need some small help, and perhaps you guys here could help me with that…
It shouldn’t be anything difficult at all (but it is difficult if you don’t know scripting).
Anyway, I need a onmouseover / hover effect.
I already found several solutions for changing the SAME background color e.g. as the div you move the mouse over.
But what I need is…
a navigation div… where, when I move my mouse over, DIFFERENT divs (at least two) will change its color (and changes it back to the default color after mouse isn’t over it anymore)…
And it also should change the image of the navigation button itself as well as some other graphic. (the last two I already have)

Hope you know what I mean (english bad).
Thanks so much in advance!
Grimwood

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@Declan1991Jun 30.2010 — If you could show us your HTML, we will be able to help you better.
Copy linkTweet thisAlerts:
@GrimwoodauthorJun 30.2010 — Sorry about that.

All I have so far is


<SCRIPT LANGUAGE="JavaScript">

// Preload Images

var image0 = new Image(); image0.src = "/inc/img/nav_01_on.png";

var image1 = new Image(); image1.src = "/inc/img/header_icon_trailer.gif";

var image2 = new Image(); image2.src = "/inc/img/nav_02_on.png";

var image3 = new Image(); image3.src = "/inc/img/nav_03_on.png";

var image4 = new Image(); image4.src = "/inc/img/nav_04_on.png";

var image5 = new Image(); image5.src = "/inc/img/nav_05_on.png";

var image6 = new Image(); image6.src = "/inc/img/nav_06_on.png";


</script>

<css>

.header_line { background-color: #11ba12; padding-top: 4px; }

</css>


<div id="container">


<div id="header">

<div id="header_left">

<div class="header_line"></div>

</div>

....


<div class="header_line"></div>

...

<a href="#" onmouseover="image0.src='/inc/img/nav_01_on.png'; image1.src='/inc/img/header_icon_trailer.gif';" onmouseout="image0.src='/inc/img/nav_01_off.png'; image1.src='/inc/img/header_icon_trailer.gif';"><img src="/inc/img/nav_01_off.png" alt="" name="image0" /></a>

...

</div>


So what I now would need is to have both those "class=header_line" divs change their bg color if you hover over the image at the end (6 different buttons)....
Copy linkTweet thisAlerts:
@GrimwoodauthorJun 30.2010 — sorry about that.

all i have so far is


[CODE]<SCRIPT LANGUAGE="JavaScript">

// Preload Images
var image0 = new Image(); image0.src = "/inc/img/nav_01_on.png";
var image1 = new Image(); image1.src = "/inc/img/header_icon_trailer.gif";

var image2 = new Image(); image2.src = "/inc/img/nav_02_on.png";
var image3 = new Image(); image3.src = "/inc/img/nav_03_on.png";
var image4 = new Image(); image4.src = "/inc/img/nav_04_on.png";
var image5 = new Image(); image5.src = "/inc/img/nav_05_on.png";
var image6 = new Image(); image6.src = "/inc/img/nav_06_on.png";

</script>[/CODE]

[CODE] .header_line { background-color: #11ba12; padding-top: 4px; }[/CODE]

[CODE]<div id="container">


<div id="header">

<div id="header_left">

<div class="header_line"><div class="header_line_shine"> </div></div>

</div>

<div id="header_icon"><img src="/inc/img/header_icon_trailer.gif" alt="" name="image1" /></div>

---

<div class="header_line"><div class="header_line_shine"> </div></div>


---

<a href="#" onmouseover="image0.src='/inc/img/nav_01_on.png'; image1.src='/inc/img/header_icon_trailer.gif';" onmouseout="image0.src='/inc/img/nav_01_off.png'; image1.src='/inc/img/header_icon_trailer.gif';"><img src="/inc/img/nav_01_off.png" alt="" name="image0" /></a>



[/CODE]

now what i would need is to have those two "class=header_line" divs change their bg colors when i hover over the nav button (6 nav visible)..

thanks again!
Copy linkTweet thisAlerts:
@GrimwoodauthorJun 30.2010 — hey again,

i know found a solution on my own... but it's very "long"... so.. perhaps anyone knows how to do all this with less code/better?

would much appreciate it... thanks again in advance!

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<script type="text/javascript">

var image0 = new Image(); image0.src = "/inc/img/nav_01_on.png";

var image1 = new Image(); image1.src = "/inc/img/header_icon_trailer.gif";

var image2 = new Image(); image2.src = "/inc/img/nav_02_on.png";

var image3 = new Image(); image3.src = "/inc/img/nav_03_on.png";

var image4 = new Image(); image4.src = "/inc/img/nav_04_on.png";

var image5 = new Image(); image5.src = "/inc/img/nav_05_on.png";

var image6 = new Image(); image6.src = "/inc/img/nav_06_on.png";


var border = document.getElementById('border');

var border2 = document.getElementById('border2');

</script>


<style>


body {
margin: 0;
padding: 0;

width: 100%;

background-color: #fff;
background-image: url(/inc/img/page_back.jpg);
background-repeat: no-repeat;

font-family: Arial;
font-size: 9pt;
color: #fff;

}


img {

border: 0px;
}


a:link, a:hover, a:active, a:visited {
color: #a5d7ef;
text-decoration: none;
}


#container {
width: 100%;
}


.copyright {
clear: both;
margin-top: 40px;
color: #3d3d3d;
font-size: 9px;
}



#header { background-image: url(/inc/img/header_back.png); }
#header_left, #header_icon { float: left; }

#header_left { width: 76px; height: 160px; background-image: url(/inc/img/header_left_back.jpg); background-repeat: no-repeat; padding-top: 100px }
#header_icon { width: 110px; height: 160px; background-image: url(/inc/img/header_icon_back.jpg); background-repeat: no-repeat; padding-top: 49px; padding-left: 5px; }
#header_main { height: 160px; background-image: url(/inc/img/header_main_back.jpg); background-position: 186px 0px; background-repeat: no-repeat; }

.header_logo { height: 100px; }
.header_line { background-color: #11ba12; padding-top: 4px; }
.header_line_red { background-color: #ba1811; padding-top: 4px; }
.header_line { background-color: #11ba12; padding-top: 4px; }
.header_line { background-color: #11ba12; padding-top: 4px; }
.header_line { background-color: #11ba12; padding-top: 4px; }
.header_line { background-color: #11ba12; padding-top: 4px; }



.header_line_shine { height: 1px; background-image: url(/inc/img/header_line_shine.png); }

#content { clear: both; padding-left: 200px; border: 1px solid red; }

</style>

</head>

<body>


<div id="container">

<div id="header">

<div id="header_left">

<div id="border" class="header_line"><div class="header_line_shine"> </div></div>

</div>

<div id="header_icon"><img src="/inc/img/header_icon_trailer.gif" alt="" name="image1" /></div>

<div id="header_main">

<div class="header_logo">


</div>


<div id="border2" class="header_line"><div class="header_line_shine"> </div></div>


<div class="navigation">

<a href="#" onmouseover="image0.src='/inc/img/nav_01_on.png'; image1.src='/inc/img/header_icon_trailer.gif';" onmouseout="image0.src='/inc/img/nav_01_off.png'; image1.src='/inc/img/header_icon_trailer.gif';"><img src="/inc/img/nav_01_off.png" alt="" name="image0" /></a>
<img src="/inc/img/nav_02_off.png" alt="" /><img src="/inc/img/nav_03_off.png" alt="" /><img src="/inc/img/nav_04_off.png" alt="" />
<a href="#" onmouseover="document.getElementById('border').className = 'header_line_red'; document.getElementById('border2').className = 'header_line_red'; image5.src='/inc/img/nav_05_on.png'; image1.src='/inc/img/header_icon_contact.gif';" onmouseout="document.getElementById('border').className = 'header_line'; document.getElementById('border2').className = 'header_line'; image5.src='/inc/img/nav_05_off.png'; image1.src='/inc/img/header_icon_trailer.gif';"><img src="/inc/img/nav_05_off.png" alt="" name="image5" /></a>
<img src="/inc/img/nav_06_off.png" alt="" />

</div>

</div>

</div>


</div>



</body>

</html>[/QUOTE]
×

Success!

Help @Grimwood 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.28,
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,
)...