Menu
I would like to click on the DIV (article-column1) ("which is a rectangle")
and it should redirect me to another HTML document:
https://s3-us-west-1.amazonaws.com/example/the-example.html
Blockquote
<style>
#content1 {
width: 70%;
overflow: auto;
margin: 4% 0% 0% 23%;
padding-left: 6%;
}
#content1 div {
float: left;
width:27%;
height:20%;
background-color: #efefef;
margin: 1% 3% 2% 0%;
padding: 2% 2% 1% 2%;
text-align: center;
}
#content1 p {
color:#f91d04;
}
.article-column1 {
-moz-box-shadow: -5px 5px 29px #777777;
-webkit-box-shadow: -5px 5px 29px #777777;
box-shadow: -5px 5px 29px #777777;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.article-column2 {
-moz-box-shadow: -5px 5px 29px #777777;
-webkit-box-shadow: -5px 5px 29px #777777;
box-shadow: -5px 5px 29px #777777;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.article-column3{
-moz-box-shadow: -5px 5px 29px #777777;
-webkit-box-shadow: -5px 5px 29px #777777;
box-shadow: -5px 5px 29px #777777;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.article-column4 {
-moz-box-shadow: -5px 5px 29px #777777;
-webkit-box-shadow: -5px 5px 29px #777777;
box-shadow: -5px 5px 29px #777777;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
</style>
<body>
<div id="content1">
<div class="article-column1">
<img src ="https://s3-us-west-1.amazonaws.com/plus32med.png">
<p>New Workout</a></p>
</div>
<div class="article-column2">
<img src = "https://s3-us-west-1.amazonaws.com/clock61.png">
<p>History</p>
</div>
<div class="article-column3">
<img src = "https://s3-us-west-1.amazonaws.com/money57.png">
<p>Graph</p>
</div>
<div class="article-column4">
<img src = "https://s3-us-west-1.amazonaws.com/play11.png">
<p>video</p>
</div>
</div>
</body>
Blockquote
692
asked Dec 31 '14 02:12
in HTML5 you can wrap your <div> inside an anchor element.
SEO-wise is always better to use an Anchor tag instead of JavaScript onclick handlers:
<a href="page.html">
<div>Yey I'm clickable</div>
</a>
PS: make sure to not have other anchor or action button elements within the wrapping <a>.
71
<div onclick="window.location.href = 'http://example.com';">Click this div to get redirected.</div>Manipulate window.location.href on element click:
document.querySelector('.article-column1').addEventListener('click', function(e) {
window.location.href = 'http://example.com';
}, false);
use this
<a class="article-column1" href="****link****">
<img src ="https://s3-us-west-1.amazonaws.com/plus32med.png">
</a>
and CSS
.article-column1 {
-moz-box-shadow: -5px 5px 29px #777777;
-webkit-box-shadow: -5px 5px 29px #777777;
box-shadow: -5px 5px 29px #777777;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
display : block;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With