Clickable block

HTML & CSS
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?

2

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

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.

4

There are clickable blocks here http://thefintrytrust.org.uk/news.htm

All the text is the link, with spans formatting the various bits.

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. :lol:

6

What is the full word for AP or the meaning of it?

7

ap = absolute position

rp = relative position

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>
9

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>
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.

11

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

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>
13

[ot]It’s always nice to see a fellow forumer be thankful for getting his answer.
No problem, dotJoon, you’re welcome :wink:
You seem to have no problems with being courteous, every thread you make :)[/ot]