Solved

Applying Link using CSS only

Posted on 2012-12-20
24
260 Views
Last Modified: 2012-12-21
Hello all experts.

I was wondering if there was a way by which I could apply a link (A HREF) to a div or to an images using only CSS.

So for example, if there was a background image to a DIV, then if a person clicked inside that DIV, then they will be linked to the corresponding page.

Unfortunately, I cannot place an transparent image inside the DIV or have any content inside the DIV.

The linking has be happen, if at all possible, only via CSS.

Or, at the most, via some JavaScript, but that too is way beyond me...[:0(

Thanx in advance,

--d.
0
Comment
Question by:driven_13
  • 8
  • 8
  • 7
  • +1
24 Comments
 
LVL 74

Expert Comment

by:käµfm³d 👽
ID: 38711968
CSS is for styling, so it wouldn't make sense that you could affect the behavior of a page via CSS. I think Javascript is your friend on this one.

Try:

<!DOCTYPE html>
<html>
  <body>
    <div id="div-to-target">this is the content</div>

    <script type="text/javascript">
        var targetDiv = document.getElementById('div-to-target');

        if (targetDiv != null) {
            targetDiv.onclick = function() {
                window.location = "http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_27975011.html";
            }
        }
    </script>
  </body>
</html>

Open in new window

0
 

Author Comment

by:driven_13
ID: 38712465
Thanx for the response kaufmed.

That was exactly what I was looking for...[:0)

Two follow-up questions:

1.)  Does the JavaScript have to sit AFTER the DIV..??  Because if I put it in the HEAD section it is not working.

2.)  What if I have a couple of more DIVs that I want to behave this same way?  Do I copy and paste this same code or is there a better way of accomplishing it..?

3.)  What if I want to open the link in a separate window..?

Thanx again.

--d.
0
 
LVL 11

Expert Comment

by:mcnute
ID: 38712617
To answer all of your follow-up questions I would use the jquery framework with which you overcome some browserspecific issues and can address all of your divs by just applying the same class of all the divs you want to behave like link tags and store the actual url where you want the user to go after clicking the div in the id of the div's.

add this in your head section of your html:
<script type="text/javascript src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript>
//jquery code
$(function(){  // this will apply this functino to your divs only after the dom has been loaded completely, resolves the issue of code positioning. you can leave it in the head section now
   $('.class_of_your_link_divs').click(function(){
      var url $(this).attr('id');
      window.location = url;
   });
});
</script>

Open in new window

0
 

Author Comment

by:driven_13
ID: 38712636
Cool.  Thanx much.

So, window,location = url means it will open in a new window..??

How do I mix and match; some opens in a new window while some do not...??

--d.
0
 
LVL 11

Expert Comment

by:mcnute
ID: 38712667
One solution could be to create hidden <a> tags with the target="_blank" (new window) or target="_self" (same window) attribute and trigger the click via jquery. The id of your div's is now holding the reference to the hidden <a> tag. Like so:

<a href="some url" id="hidden-href-1" target="_what you prefer self or blank" class="apply_some_css_to_hide_it">
<div class="i_act_as_a_link" id="href-1" ></div>

Open in new window


jqeury

$('.i_act_as_a_link').click(function(){
     var link = 'hidden'+$(this).attr('id');
    $('#'+link).trigger('click');

});

Open in new window

0
 

Author Comment

by:driven_13
ID: 38712935
Thanx for the response mcnute.

I used the first solution (without opening a separate window) and it is working fine, except that in IE it is showing this error in the lower-left corner:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.2)
Timestamp: Fri, 21 Dec 2012 13:47:09 UTC


Message: Expected ';'
Line: 3
Char: 15
Code: 0
URI: http://mydomainname.com/js/activefunctions.js

Open in new window


and this is what is in that file:

$(function(){
   $('.divlinkopen').click(function(){
      var url $(this).attr('id');
      window.location = url;
   });
});

Open in new window


Line 3, Character 15 is the dollar-sign ($).

Any idea what is this error all about...??

Thanx,

--d.
0
 
LVL 11

Expert Comment

by:mcnute
ID: 38713025
I forgot an equal sign in there, sorry for that:

so:
$(function(){
   $('.divlinkopen').click(function(){
      var url = $(this).attr('id');
      window.location = url;
   });
});

Open in new window

0
 

Author Comment

by:driven_13
ID: 38713068
Ok.

I am sorry but I am an absolute noob in all this.

I am not sure where to put the actual URL where I want to link to.

All I have is the code that you sent me and I inserted the name of the DIV that I want to be clickable.  But where do I put the actual URL...???

My ignorance is getting in my way.

Sorry.

--d.
0
 
LVL 11

Expert Comment

by:mcnute
ID: 38713088
Your URL goes in the <a> tag of your html

Consider this:

 <a href="here_goes_your_url.com/somepage.html" id="hidden-href-1" target="_blank" title="Some Title for the link" ></a> (I also forgot to close the a tag so please add that closing </a> after the opening <a ... in the script i sent you first.)

I hope I could explain it somehow.
0
 
LVL 42

Accepted Solution

by:
Chris Stanyon earned 400 total points
ID: 38713117
I would go about this slightly differently, and avoid the hacky feel of mcnute's solution. Set the url in a data field and use jQuery to open the link.

//HTML
<div class="clicker" data-url="http://www.microsoft.com">
   Microsoft
</div>

<div class="clicker" data-url="http://www.yahoo.com">
   Yahoo
</div>

<div class="clicker" data-url="http://www.google.com">
   Google
</div>

Open in new window

//jQuery
$('.clicker').click(function(){
   window.open($(this).data('url'));
});

Open in new window

Have a fiddle: http://jsfiddle.net/ChrisStanyon/5Lv5c/
0
 
LVL 11

Expert Comment

by:mcnute
ID: 38713180
ChrisStanyon is right. That is even simpler and is html 5 compliant. Some pointies would be nice though.
0
 

Author Comment

by:driven_13
ID: 38713185
Gentlemen, I am sorry but none of the solutions are working.

This is what I have in the HEAD:

<script type="text/javascript src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" >
$(function(){
$('.clicker').click(function(){
   window.open($(this).data('url'));
}); 
});
</script>

Open in new window


This is what I have in the BODY:

<div id="homepageMain">
    <div class="left"></div>    
     <div id="clicker" data-url="http://www.microsoft.com" class="right"></div>
    </div>

Open in new window


There is no other content in this DIV but it has a width and height explicitly set.  I want the whole DIV clickable as there is a background image.  So people will think they are clicking on the actual image.

It is entirely possible I copied some code wrong as I hav no idea what I am doing.

Looking at the above can you tell me what I am doing wrong..??

Thanx again,

--d.
0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 11

Expert Comment

by:mcnute
ID: 38713196
You need to change the $('.clicker') which would address an element with the CLASS clicker to $('#clicker') which addresses your div with an ID clicker. hash is for id's. period for classes. Then it should work.
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 38713198
In the HTML you have an ID of 'clicker', but the jQuery is looking for a class of clicker. An ID can only exist once in a page and has to be unique whereas a class can be used as often as needed. If you want more than one clicker then it has to use classes. Change you HTML to this:

<div class="clicker" data-url="http://www.microsoft.com" class="right"></div>
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 38713208
Actually, just realised you already have a class assigned so just add clicker to it:

<div data-url="http://www.microsoft.com" class="right clicker"></div>
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 38713242
Just to clarify, in CSS (and jQuery) you select an element with an ID using # (hash) and you select elements with a class using . (period)

So:

   $('.clicker') //jquery
   .clicker { } //css

will select/style all elements with a class of 'clicker', for example

<div class="clicker">Clicker 1</div>
<div class="clicker">Clicker 2</div>

whereas

$('#clicker') //jquery
#clicker { } //css

will select/style a single element with an ID of #clicker, such as:

<div id=-"clicker">Clicker</div>
0
 

Author Comment

by:driven_13
ID: 38713260
Ok, cool. Thanx for the quick lesson.

The solution is working to an extent.

Now, when I click on it, it is opening up a separate window with this URL:

http://mydomainname.com/undefined

I want it to stay in the same window and open the microsoft.com site.

So close...!!

--d.
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 38713335
OK. Just change the window.open line:

$('.clicker').click(function(){
   window.location = $(this).data('url');
});

Open in new window

0
 

Author Comment

by:driven_13
ID: 38713358
Ok, it is now opening in the same window but with the same wrong URL as before:

http://mydomainname.com/undefined

--d.
0
 
LVL 11

Assisted Solution

by:mcnute
mcnute earned 100 total points
ID: 38713376
Try using

$('.clicker').click(function(){
   window.location = $(this).attr('data-url');
});

Open in new window

0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 38713379
Post your code as you have it - the HTML and the jQuery.
0
 

Author Comment

by:driven_13
ID: 38713394
That did it....!!!!

Thank you both for your help and immense patience with me.

Have a Merry Christmas.

Best,

--d.
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 38713410
You're welcome...

Happy Christmas ;)
0
 
LVL 11

Expert Comment

by:mcnute
ID: 38713417
Cheers, enjoy your holidays.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now