layers as links
- Started
- Last post
- 12 Responses
- wwfc
Hi All,
Sorry to be asking for advice again - but am schtuck! I have a page that made up of layers and positioned by css.
At the bottom of the page there are four boxes/layers - that each contain a title/image/text/link - what I want to do is make each of these four boxes into a link so if the user mouses over anywhere on the area of the box they get the rollover text colour change and if they click anywhere on the area it takes them to that page.
But I can't seem to work out how to do this! -
How do I make the whole box/layer a link - I would just drop in a rollover image as the box content but the boxes are % based so widen and narrow depending on the users browser window size.
Is it possible to make the whole layer into a link?
Any pointers warmly welcomed!!!
- wwfc0
...nice one corvo...
I'll give it a try
;-)
- neverblink0
CSS:
.clickable{
cursor: pointer;
}html:
<div id="box1" class="clickable" onmouseover="rollover()" onmouseout="rollout()" onclick="alert('I can be clicked')"> content of div </div>
- wwfc0
...neither of those seem to work - thanks though amigos
;-)
- wwfc0
this is the html from the page:
<div id="box0">
<div id="title0">WHY US </div>
<div id="layer">Register with us </div>
<div id="click0">
<div align="left" class="linkage"><a href="about.html" ><strong>TELL ME MORE </strong></a></div>
</div>
<div id="text0">
<div align="left" class="style32">This is positional text and therefore should not read as anything other than blurb.</div>
</div>
<div id="pic0">
<div align="center"><img src="mangoggler.jpg" alt="register with influx" width="153" height="60" /></div>
</div>
</div>
am I getting a little div-happy? and this is the css...
#box0 {
position:absolute;
left:5%;
top:386px;
width:20%;
min-width:153px;
height:185px;
z-index:5;
background-color: ffffff;
border: thin solid #66CC33;
}
#click0 {position:absolute;
left:5%;
top:158px;
width:90%;
height:24px;
z-index:1;
}
#pic0 {position:absolute;
left:0px;
top:30px;
width:100%;
height:60px;
z-index:1;
background-image: url(bggoggler.jpg);
}
#text0 {position:absolute;
left:5%;
top:97px;
width:160px;
height:57px;
z-index:1;
}
#title0 {position:absolute;
left:0px;
top:0px;
width:100%;
height:30px;
z-index:1;
background-color: #66CC33;
font-family: Arial;
font-weight: bold;
vertical-align: middle;
text-indent: 15px;
text-align: left;
color: #FFFFFF;
padding-top: 7px;
}any see or think of an easy solution to make the link work?
- neverblink0
I just tested it in Firefox, Explorer, Opera and Safari - it works in all
- wwfc0
...it does? well that's good - I guess it is me not putting the bits in the right place! do you have the code for the one that works - hope that doesn't sound like I need spoon-feeding - but I think I need someone to hold my hand!!!
- neverblink0
put this in your head, it will ensure that people will see that the div is clickable by changing the cursor:
<style>
.clickable{
cursor: pointer;
background-color: #CCC;
}
</style>and this in your body:
<div id="box1" class="clickable" onmouseover="rollover()" onmouseout="rollout()" onclick="alert('I can be clicked')"> content of div </div>
- wwfc0
...thanks neverblink ;-)
- wwfc0
....yeh, yeh, yeh! nice one - how do I tell it what page to link to? just add add in a normal href or sumat?
- neverblink0
yeah, just delete the 'onclick=...' and insert a 'href=...'
- wwfc0
...champion! cheers for that - you just saved the last tuft of hair on my head!!