CSS3 How do i add a hyperlink to <div data-image=“#”>

Question

sorry i've tried asking this before and got no good results, so here's trying again. I have tried many things and still haven't had any good results.

The code is here -> PasteBin

I want to add a hyperlink to the data-images for the ninja slider. I've never encountered data-image before but i can't use img src="#" cause that doesn't work with the javascript if you guys need any more information, let me know. This is driving me insane!

  <div id='ninja-slider'>
                 <ul>
                     <li>
                        <div data-image="images/md/1.jpg"> </div>
                     </li>
                     <li>
                         <div data-image="images/md/2.jpg"> </div>
                     </li>
                     <li>
                         <div data-image="images/md/3.jpg"></div>
                     </li>
                     <li>
                         <div data-image="images/md/4.jpg"></div>
                     </li>
                 </ul>
             </div>

this is the troublesome part.

Answer 1

Simply enclose your <div> s within an <a> tag. That way the <div> s are technically links.

 <div id='ninja-slider'> <ul> <li> <a href="images/md/1.jpg"> <div data-image="images/md/1.jpg"></div> </a> </li> <li> <a href="images/md/2.jpg"> <div data-image="images/md/2.jpg"></div> </a> </li> <li> <a href="images/md/3.jpg"> <div data-image="images/md/3.jpg"></div> </a> </li> <li> <a href="images/md/4.jpg"> <div data-image="images/md/4.jpg"></div> </a> </li> </ul> </div> 

Answer 2

you can use java script to add link

Example:

 <div onclick="javascript:location.href='http://www.google.com/'" data-image="images/md/1.jpg"> </div>

Also you can use css to change the pointer

 #ninja-slider ul li div{
cursor:pointer;
}

Thanks..

Answer 3

Try using:

<div onclick="location.href='http://www.example.com';" />

Or use span or a tags instead

<style type="text/css">
.myspan {
    display: block;
}
</style>
<a href="#"><span class="myspan">text</span></a>