html CSS help!

by 17 replies
20
Hello Warriors,

Is it possible to make the background image clickable from the CSS style or if you have any ideas.

Please check the website here

Style code:


td.bgimage {
// width: 750px;
background-image:url(images/bgimage.jpg);
background-repeat:no-repeat;

Thank you in advance!
#programming #css #html
  • you mean need bg image as button ?
    • [1] reply
    • Hello junly,

      I want to make the background image "bgimage.jpg" clickable, so when someone click it he will be directed to another website.
  • <div onclick="location.href='http://www.google.com/';">BG image</div>

    set width and height of div and also background when some one click on that div it will redirect. you can get mouse change script from google
    • [ 1 ] Thanks
  • Or you can use,

    <img type="button" src="http://your-url" />

    Mohit
    • [1] reply
    • I have tried both codes but seems not working. Any ideas
      • [1] reply
  • This will give you Background image by div, but will not make it clickable. We were suggesting changes in the HTML elements of your page.

    My solution was to put this code inside the TD tag in which you want your image.

    Code:
    <input type="image" src="images/bgimage.jpg" />
    And Junly's solution was to make the div clickable. So instead of defining TD's class, you will write a DIV tag inside the TD element as

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

    Mohit
  • This effect can be generated in jquery.
  • not possible. click events can only be triggered on HTML elements.
  • This is not possible with CSS, because CSS is part of HTML which do not allow background pic has any action or trigger any event. You must do this with a JavaScript or Vb-script.
    • [1] reply
    • Using CSS to make the background image clickable.

      Add this code to it:

      #background {
      pointer-events:auto;
      }

      And throw an href tag on it, and it will function like it should.
      • [ 1 ] Thanks
  • CSS is very usefult. It can contain complete information about your page design and stored .css file. So it is easy for us to change, update and manage the design of our website.
  • <style>
    .clickme div{
    width:200px;
    height:200px;
    background-image:url(your image here);
    background-repeat:no-repeat;
    }
    </style>

    <a href="yourdomain.com" class="clickme"><div></div></a>

    This can help you to do what you want.
    • [ 1 ] Thanks
  • CSS stands for Cascading Stylesheet. Through it you can define the complete design for your website in single (.css) file. So that you have complete facility to easily update and manage your website design.
    • [ 1 ] Thanks
  • I love how new members dig out year old threads and give absolutely useless answers.
    • [1] reply
    • To be fair, I didn't dig it up, and I sure didn't notice it was that old. I blame it on the <15ers.

      However, my answer is perfect for this question, and wasn't previously mentioned on the warrior forums. I had actually spent several hours looking for this same solution (actually in reverse, my background image was a tornado that spun infront of the webpage and I couldn't click on any of the regular links on my page, only the background!) and came upon the pointer-events class, which is just awesome. It has changed some of my fundamental CSS designs, and has allowed be to do all kinds of stuff.

      For instance, you can use a the pointer-events to make clicks through the background of a transparent .png to go to the div or links below it, but a click on the image will still count. This means you can now have clickable stars moving around, but the clear-space between star-points isn't clickable.

      I know I'm a geek when I'm so excited about pointer-events :p
Join the discussion

Next Topics on Trending Feed