944,033 Members | Top Members by Rank

Ad:
You are currently viewing page 1 of this multi-page discussion thread
Mar 8th, 2006
0

Hyperlink a div

Expand Post »
Is it possible to make an entire <div> into a hyperlink using CSS only, as can be easily accomplished with mouse events in JavaScript? I'm assuming it's too good to be true since CSS isn't interactive? Nevermind ... I guess I just answered my own question
Administrator
Staff Writer
Reputation Points: 1422
Solved Threads: 162
The Queen of DaniWeb
cscgal is online now Online
13,645 posts
since Feb 2002
Oct 17th, 2006
0

Re: Hyperlink a div

The way I do it is as follows (for example):

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <div style="position:absolute; left:0px; top:0px; border-color:#FFFFFF;
  2. border-style:solid" CLASS="divname"
  3. onmouseover="style.backgroundColor='#FFFFFF';
  4. this.style.cursor='pointer'" onmouseout="style.backgroundColor=''"
  5. onmouseup="somepage.htm"></div>
Reputation Points: 32
Solved Threads: 9
Posting Whiz in Training
SnowDog is offline Offline
214 posts
since Oct 2006
Oct 28th, 2006
0

Re: Hyperlink a div

[html]a.divlink, a.divlink:link {
display:block;
width:100%; /*width needs to be specified to work in IE*/
height:100%; /*height needs to be specified to work in IE*/
/*Other browsers expand the link to full width and height.*/
line-height:0;
font-size:0;
}



<div><a class="divlink">link</a></div>[/html]

Hope this helps you buddy
Last edited by tgreer; Oct 28th, 2006 at 10:15 am. Reason: Put code in code tags.
Reputation Points: 10
Solved Threads: 1
Newbie Poster
remiremi is offline Offline
10 posts
since Oct 2006
Oct 28th, 2006
0

Re: Hyperlink a div

Click to Expand / Collapse  Quote originally posted by cscgal ...
Is it possible to make an entire <div> into a hyperlink using CSS only, as can be easily accomplished with mouse events in JavaScript? I'm assuming it's too good to be true since CSS isn't interactive? Nevermind ... I guess I just answered my own question
Nope, unfortunately you're right. You can't emulate links on any other HTML element with CSS. You'll have to use JS for that.
If its an issue of support for javascript than I don't think there's any way around it, but if its just code choice then you could just attach say a class to the div element and have JS run through and give it link properties.

eg:
[HTML]
<div class="dlink" href="page.html">click me</div>[/HTML]

[HTML]
<script>
// assuming you can select elements by class
document.prototype.getElmentsByClass = function(className) { ... };

var dlinks = document.getElmentsByClass('dlink');
for(var x in dlinks) {
var dlink = dlinks[x]; // closure (ie: dlink will be available in closure scope for onlick function when it is triggered in the window scope later on)
dlink.onclick = function() { document.location.href = dlink.href; };
}
</script>
[/HTML]

Even though its using JS, it emulates what you would normally do with CSS. However if you're working in an environment with only CSS on the client, then I don't believe it can be done.
Moderator
Reputation Points: 457
Solved Threads: 101
Nearly a Posting Virtuoso
digital-ether is offline Offline
1,250 posts
since Sep 2005
Oct 28th, 2006
0

Re: Hyperlink a div

Btw: adding a href attribute to a div will make it invalid xHTML1.0. So even if you found a way to do it with CSS, you'd run into that problem. The solution would be to create a custom DTD for your document.
Moderator
Reputation Points: 457
Solved Threads: 101
Nearly a Posting Virtuoso
digital-ether is offline Offline
1,250 posts
since Sep 2005
Oct 28th, 2006
0

Re: Hyperlink a div

Am I missing something?

The question was
Quote ...
Is it possible to make an entire <div> into a hyperlink using CSS only...
.

The solution I offered may not be what you'd class as 'only css' but it doesn't have a H REF and it assigns properties to a class. Is that wrong?
Last edited by SnowDog; Oct 28th, 2006 at 12:49 pm.
Reputation Points: 32
Solved Threads: 9
Posting Whiz in Training
SnowDog is offline Offline
214 posts
since Oct 2006
Oct 28th, 2006
0

Re: Hyperlink a div

you can hyperlink the entire contents of a div... put an enormous image inside it, set the overflow to hidden, and hyperlink the image

i have a q, i was gonna start a thread but this is close enough to my question:

can you hyperlink a form submit field? O_o it seems trivial but it isn't proving easy... I want a form with a normal submit button (so I can't use the form action) and another button that just opens a new page... i don't want to use JS, and I don't mind how much markup i need on the page.. (actually, i'm using "button" rather than input/submit) so i guess, i can stick i giant hyperlinked image in a overflow controlled div in a typeless button.

messy =)

any better solutions..? o_O

EDIT: bah... that doesn't work though! who decided you can't have hyperlinked anchors in buttons? as i'm overriding the button graphical style anyway, i guess i can just emulate it with a div... i have to use JS to toggle the edges and padding to give a "clicked" appearance... but at least i don't have JS depandant functionality...

another solution.. is to absolutely place another form and button next to the submit button and use the form action... methinks that's messier.
Last edited by MattEvans; Oct 28th, 2006 at 2:49 pm.
Moderator
Featured Poster
Reputation Points: 522
Solved Threads: 64
Veteran Poster
MattEvans is offline Offline
1,091 posts
since Jul 2006
Oct 28th, 2006
0

Re: Hyperlink a div

I am really, REALLY missing something here.
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <div style="position:absolute; left:0px; top:0px; border-color:#FFFFFF;
  2. border-style:solid" CLASS="divname"
  3. onmouseover="style.backgroundColor='#FFFFFF';
  4. this.style.cursor='pointer'" onmouseout="style.backgroundColor=''"
  5. onmouseup="somepage.htm"></div>
makes the entire div a link.
Reputation Points: 32
Solved Threads: 9
Posting Whiz in Training
SnowDog is offline Offline
214 posts
since Oct 2006
Oct 28th, 2006
0

Re: Hyperlink a div

Quote ...
onmouseup="somepage.htm"
is that not JS though?

EDIT: infact, it's not just JS, it's erroneous JS, should be

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. onmouseup="window.location='somepage.htm'"
Last edited by MattEvans; Oct 28th, 2006 at 3:05 pm.
Moderator
Featured Poster
Reputation Points: 522
Solved Threads: 64
Veteran Poster
MattEvans is offline Offline
1,091 posts
since Jul 2006
Oct 28th, 2006
0

Re: Hyperlink a div

Well, no.
Reputation Points: 32
Solved Threads: 9
Posting Whiz in Training
SnowDog is offline Offline
214 posts
since Oct 2006

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: disable parent window
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Javascript gives error on localhost





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC