CODEWITHSUNDEEP
javascripthtmlimageopacitycss
Mike Harvey
Mike Harvey

Reputation: 5

Why are my DIVs not responding to my Javascript opacity function?

I've created a very simple javascript function where as I hover over certain words, elements with a certain id become transparent. This is working fine with my img tags, but divs with the same id are not changing?

Here is my javascript:

function revealCategory1() {
document.getElementById('c2').style.opacity="0.3";
document.getElementById('c3').style.opacity="0.3";
document.getElementById('c4').style.opacity="0.3";
}

function revealCategory2() {
document.getElementById('c1').style.opacity="0.3";
document.getElementById('c3').style.opacity="0.3";
document.getElementById('c4').style.opacity="0.3";
}

function revealCategory3() {
document.getElem..............etc

function resetReveal() {
document.getElementById('c1').style.opacity="1";
document.getElementById('c2').style.opacity="1";    
document.getElementById('c3').style.opacity="1";    
document.getElementById('c4').style.opacity="1";    
}

http://jsfiddle.net/u6XG2/

Which is being called by this html:

<div class="bars">
<span class="categories" id="c1" onMouseOver="revealCategory1()" onMouseOut="resetReveal()">VIDEO</span>
<span class="categories" id="c2" onMouseOver="revealCategory2()" onMouseOut="resetReveal()">ANIMATION</span>
<span class="categories" id="c3" onMouseOver="revealCategory3()" onMouseOut="resetReveal()">DESIGN</span>
<span class="categories" id="c4" onMouseOver="revealCategory4()" onMouseOut="resetReveal()">WEB-DESIGN</span>
</div>

On the page, this is working absolutely fine. The images go transparent.

<div class="logocontainer" >
<img class="logo" id="c1" src="images/DOSED-C1.png" />
<img class="logo" id="c2" src="images/DOSED-C2.png" />
<img class="logo" id="c3" src="images/DOSED-C3.png" />
<img class="logo" id="c4" src="images/DOSED-C4.png" />
</div>

But this is NOT, the divs don't go transparent.

<div class="maincontent">
<div id="c1" class="content" >VIDEO PIECE 1</div>
<div id="c2" class="content" >ANIMATION PIECE 1</div>
<div id="c3" class="content" >DESIGN PIECE 1</div>
<div id="c4" class="content" >WEB-DESIGN PIECE 1</div>
</div>

Upvotes: 0

Views: 1048

Answers (2)

Mark Giblin
Mark Giblin

Reputation: 1106

Sorry to say it but it is a pretty common mistake but All ID's have to be unique. Its the name tag that can be duplicated.

An alternative idea would be to use a class element and the document.getElementsByClassName method and then spool through the array thats returned picking out those elements you want, thats a good one for elements that don't allow the name tag.

Upvotes: 0

Samuel Liew
Samuel Liew

Reputation: 79073

You cannot have two (or more) elements with the same ID.

Have the images IDs named differently. i.e.: 

<img class="logo" id="c1_image" src="images/DOSED-C1.png" />

Then, perform actions on both IDs:

function resetReveal() {
    document.getElementById('c1').style.opacity="1";
    document.getElementById('c1_image').style.opacity="1";

Also, remove those IDs from the <spans> in your .bars element. They don't do anything at the moment.

<span class="categories" onMouseOver="revealCategory1()" onMouseOut="resetReveal()">VIDEO</span>

Upvotes: 1

Related Questions