Forum Moderators: not2easy
I know you could do a getElementByID but there could be 80 or so divs on the page at once and think that would get rather messy.
Essentially I want to do something like parent.div.style.backgroundcolor ....... but syntactically correct in javascript I expect?
Heres some code... 2 examples of the thumbnail box:
<div class="photobox">
<div class="imgT"><img src="/previews/dannip/top20/thumbs/Danni_Top20_14.jpg" ></div>
<div class=buyLink2 >file: <b>Danni Top20 14</b></div>
<div class=buyLink ><a href=# onClick="addToBasket('Danni_Top20_14.jpg','71717','top20');this.style.color='#b5ff0d';return false" >+ADD TO FAVS</a></div></div>
<div class="photobox">
<div class="imgT" ><img src="/previews/dannip/top20/thumbs/Danni_Top20_15.jpg" ></div>
<div class=buyLink2 >file: <b>Danni Top20 15</b></a></div>
<div class=buyLink ><a href=# onClick="addToBasket('Danni_Top20_15.jpg','71717','top20');this.style.color='#b5ff0d';return false" >+ADD TO FAVS</a></div></div>
Thanks for any help in advance!
<div class="photobox">
<div class="imgT"><img src="/previews/dannip/top20/thumbs/Danni_Top20_14.jpg" ></div>
<div class=buyLink2 >file: <b>Danni Top20 14</b></div>
<div class=buyLink ><a href=# onClick="addToBasket('Danni_Top20_14.jpg','71717','top20');this.style.color='#b5ff0d';this.parentNode.style.backgroundColor="#b5ff0d";return false" >+ADD TO FAVS</a></div></div>That's untested but shouldn't cause any problems.
I'm going to assume that class buyLink is basically a sized box of 150px by 30px. By setting it to display block it's basically a DIV and an A in one.
.photobox A {
display: block;
width: 150px; height: 30px;
}.photobox A.buylink { background: lightblue; }
.photobox A.buyLink:hover { background: coral; }
.photobox A.buyClicked { background: lightgreen; }<a class='buyLink' href='#' onClick="addToBasket('Danni_Top20_14.jpg','71717','top20'); this.className = 'buyClicked'; return false;" >+ADD TO FAVS</a>
Note you can removed the A's parent DIV this way. Here's a C&P test page....
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>Test Page</title>
<style>* { font-family: "Arial", sans-serif; }
.photobox A {
display: block;
width: 150px; height: 20px;
margin-bottom: 2px; padding: 5px;
line-height: 20px;
}.photobox A.buyLink { background: lightblue; }
.photobox A.buyLink:hover { background: coral; }
.photobox A.buyClicked { background: lightgreen; }</style>
</head><body>
<div class='photobox'>
<a class='buyLink' href='#' onClick="this.className = 'buyClicked'; return false;" >Link 1</a>
<a class='buyLink' href='#' onClick="this.className = 'buyClicked'; return false;" >Link 2</a>
<a class='buyLink' href='#' onClick="this.className = 'buyClicked'; return false;" >Link 3</a>
<a class='buyLink' href='#' onClick="this.className = 'buyClicked'; return false;" >Link 4</a>
</div></body>
</html>
