11 {{ upvoteCount | shortNum }}
11 {{ upvoteCount | shortNum }}

Adding a CLICKABLE image in style.css?

by Jay Rhome
7 replies
  • WEB DESIGN
    • |
Hi you great programmers

I was wondering if in the style sheet (style.css) of a WP theme, if there is a way to add a CLICKABLE image?



I know how to add the image

ex:url(images/sidebartop.gif)



But is there a way to make it an hyperlink?



Thanks
#adding #clickable #image #stylecss
  • Profile picture of the author Bruce Hearder
    I don't know of anyway to do it with CSS, but you can make it clickable by using some very simple javascript. Would that work for you?

    Bruce
    {{ DiscussionBoard.errors[1765485].message }}
    • Profile picture of the author Jay Rhome
      As long as it works I'm all hears

      Is javascript well read on most computers and browsers? It'll be the most important image/link of the site.

      I'll try also to figure out a way to fit a widget in that space. I know the basics of php and css, but just the basics
      {{ DiscussionBoard.errors[1765556].message }}
      • Profile picture of the author Bruce Hearder
        Hey Jay,

        This is how I would do it, sample code to follow :

        <div id="image1"></div>

        [script type="javascript"]
        var x = document.getElementById("image1");
        x.src="/images/some-image.jpg";
        x.onclick = function(){window.location.href=''htttp://www.google.com"; return false;}
        [/script]

        This will turn the div into an image, and then make it clickable.

        Hope this helps.

        Let me know if its doesn't work as planned. This is code straight off the top of my head, so there may be a few typo errors in here..

        Take care

        Bruce
        {{ DiscussionBoard.errors[1765920].message }}
        • Profile picture of the author CarloD.
          Hey There,

          What exactly are you trying to make a link?

          If you are loading the image with css, you could have:

          Code:
          <div id="image">
<a href="location">
<span style="display:none;">Hidden Keyword here, for screen readers if you want</span>
</a>
</div>
          the div is the image in the css you can set width and height and what not

          not sure if that's what you need, but it's another way of doing it without javascript.
          Signature

          {{ DiscussionBoard.errors[1767036].message }}
  • Profile picture of the author Jay Rhome
    Hey guys. Thanks for your answers. I tried them to no avail. I've decided to "widgetize" this area - even though it's not exactly what I wanted, it still gets the job done for the "main link".
    {{ DiscussionBoard.errors[1771813].message }}
    • Profile picture of the author CarloD.
      Hey guys. Thanks for your answers. I tried them to no avail. I've decided to "widgetize" this area - even though it's not exactly what I wanted, it still gets the job done for the "main link".
      could you elaborate on what you are trying to do?

      do you just want to make an image a link but have the image loaded through css?

      Let me know I can setup an example for you.
      Signature

      {{ DiscussionBoard.errors[1772226].message }}
  • Profile picture of the author clickbump
    Hi Jay, when I want a css loaded image to be clickable, here's what I do (I use this a lot for logo's in headers)

    In the template markup, I have the hyperlink...

    <a href="/" alt="Home" class="logo" title="Click Here for the Home Page"></a>

    Then in the css, I do this

    .logo {display:block;background:url(path-to-your-image);height:x;width:x}
    //where "x" is the dimensions of your image

    Hope that helps...
    Signature
    {{ DiscussionBoard.errors[1772324].message }}

Trending Topics