dotJoon
November 20, 2010, 9:09pm
1
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>clickable block</title>
</head>
<body>
<div style="width:200px;height:100px;[COLOR="Green"]background-color:green[/COLOR];[COLOR="Red"]href:next1.php[/COLOR]">
<a href=next.php style="color:blue">[COLOR="blue"]next[/COLOR]</a><br>
clickable block area <br><br><br>
here<br>
</div>
</body>
</html>
I have the code above at http://dot.kr/x-test/clickableBlock1.php .
The code “href:next1.php ” in red doesn’t work at all.
But it will show what I want.
I like to make it like the following.
If a user clicks anywhere inside the green box except the link next (If the user clicks the link next , it should go to next.php.),
it will go to next1.php .
Can I do it in CSS with yourself?
or
Should I go to javascript Forum for it?
I see. I guess I dint see see that there were two links … 0.o
in that case, noon’s is the the easy answer. however… ( tho I am not afraid of js) I just know that many user still turn it off.
What about if instead of a div another anchor is used and that is AP position to cover the whole box, and the first anchor is merely RP, so when can change z-inex on it to apear ON TOP of the AP positioned anchor…
more complex an answer , but circumvents js
system
November 20, 2010, 11:11pm
3
Yes, there are, but the whole block points to a single link. The OP wants something different:two links. Yours is an equivalent of dresden_phoenix’s.
Dr_John
November 20, 2010, 11:06pm
4
There are clickable blocks here http://thefintrytrust.org.uk/news.htm
All the text is the link, with spans formatting the various bits.
system
November 20, 2010, 11:38pm
5
Errr… what JS? I use only anchors.
JS is used only to show alerts to check for correct linking.
And you’ve just pretty much described my solution.
dotJoon
November 20, 2010, 11:56pm
6
dresden_phoenix:
What about if instead of a div another anchor is used and that is AP position to cover the whole box, and the first anchor is merely RP, so when can change z-inex on it to apear ON TOP of the AP positioned anchor…
What is the full word for AP or the meaning of it?
system
November 20, 2010, 9:50pm
8
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>clickable block</title>
</head>
<body>
<div style="width:200px;height:100px;position:relative;overflow:hidden;">
<a href="next.php" onClick="alert('next')" style="color:blue; z-index:999;position:relative;">next</a>
<div onClick="alert('next1')" style="width:200px;height:100px;background-color:green; position:absolute;top:0;padding-top:1em;">
clickable block area <br><br><br>
here<br>
</div>
</div>
</body>
</html>
the easy answer:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>clickable block</title>
</head>
<body>
<div style="width:200px;height:100px;background-color:green; position:relative;">
<a href="next.php" style="color:blue; position:absolute; height:100%; width:100%; z-index:10;">next</a><br>
clickable block area <br><br><br>
here<br>
</div>
</body>
</html>
system
November 20, 2010, 10:21pm
10
@dresden_phoenix
The green box code it’s supposed to link two different pages: next.php and next1.php: next for the <a>, next1 for the rest of the <div>.
Yours only makes the <a> fill the <div> and only links to next.php.
Mine covers both click cases.
system
November 20, 2010, 10:25pm
11
dresden_phoenix:
the easy answer:
when I click the link or the green area, they both take me to next.php (using FF3.6)
hmmmmm…:scratch: how do you get to next1.php
system
November 20, 2010, 10:39pm
12
Good question.
Failed to code that in mine too. But, if dresden_phoenix doesn’t mind, I’ll use his to complete mine. Team Work!
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>clickable block</title>
</head>
<body>
<div style="width:200px;height:100px;position:relative;overflow:hidden;cursor:pointer;">
<a href="next.php" onClick="alert('next')" style="color:blue; z-index:999;position:relative;">next</a>
<div onClick="alert('next1')" style="width:200px;height:100px;background-color:green; position:absolute;top:0;left:0;">
<a href="next1.php" style="color:blue; position:absolute; height:100%; width:100%;"> </a><br>
clickable block area <br><br><br>
here<br>
</div>
</div>
</body>
</html>
system
November 21, 2010, 7:39am
13
[ot]It’s always nice to see a fellow forumer be thankful for getting his answer.
No problem, dotJoon, you’re welcome
You seem to have no problems with being courteous, every thread you make :)[/ot]