20 {{ upvoteCount | shortNum }}
20 {{ upvoteCount | shortNum }}

html CSS help!

by Mahmoud Selman
17 replies
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!
#css #html
  • Profile picture of the author rahman.warrior
    you mean need bg image as button ?
    Signature
    [WSO] BEST SEO SERVICE ON WARRIOR FORUM - $10 PER MONTH { { Guaranteed SERPs BOOST } }
    {{ DiscussionBoard.errors[5167174].message }}
  • Profile picture of the author rahman.warrior
    <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
    Signature
    [WSO] BEST SEO SERVICE ON WARRIOR FORUM - $10 PER MONTH { { Guaranteed SERPs BOOST } }
    {{ DiscussionBoard.errors[5167217].message }}
  • Profile picture of the author eminc
    Or you can use,

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

    Mohit
    Signature

    The best way to predict future is to create it ― Abraham Lincoln

    {{ DiscussionBoard.errors[5167573].message }}
    • Profile picture of the author Mahmoud Selman
      Originally Posted by junly View Post

      <div onclick="location.href='http://www.google.com/';">BG image</div>
      Originally Posted by Mohit Jawanjal View Post

      Or you can use,

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

      Mohit
      I have tried both codes but seems not working. Any ideas
      Signature
      {{ DiscussionBoard.errors[5167643].message }}
      • Profile picture of the author eminc
        Originally Posted by Mahmoud Selman View Post

        I have tried both codes but seems not working. Any ideas
        Can you paste the code that you are implementing in your website? Its pretty basic and should work.

        Mohit
        Signature

        The best way to predict future is to create it ― Abraham Lincoln

        {{ DiscussionBoard.errors[5167678].message }}
        • Profile picture of the author Mahmoud Selman
          Originally Posted by Mohit Jawanjal View Post

          Can you paste the code that you are implementing in your website? Its pretty basic and should work.

          Mohit
          <style>
          body {
          width: auto;
          color:white;
          }


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

          }

          a{
          color: #CCC;
          text-decoration: none;
          font-family: Verdana, Geneva, sans-serif;
          font-style: italic;

          }
          a:hover {
          color:red;
          text-decoration:underline;
          }


          </style>
          Signature
          {{ DiscussionBoard.errors[5167729].message }}
  • Profile picture of the author eminc
    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
    Signature

    The best way to predict future is to create it ― Abraham Lincoln

    {{ DiscussionBoard.errors[5167829].message }}
  • Profile picture of the author ricky pounting
    This effect can be generated in jquery.
    Signature
    Pull up stands | Telecom
    {{ DiscussionBoard.errors[5176660].message }}
  • Profile picture of the author rockerzz
    not possible. click events can only be triggered on HTML elements.
    {{ DiscussionBoard.errors[5177213].message }}
  • Profile picture of the author pamela88
    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.
    {{ DiscussionBoard.errors[5179162].message }}
    • Profile picture of the author Nochek
      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.
      Signature
      Nochek Solutions Presents:
      The Hydrurga WSO - Rank Your Site #1 And Score Over The Penguin Updates!
      {{ DiscussionBoard.errors[5629053].message }}
  • Profile picture of the author wilsondavid
    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.
    {{ DiscussionBoard.errors[5204904].message }}
  • Profile picture of the author ram07
    <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.
    Signature

    {{ DiscussionBoard.errors[5205121].message }}
  • Profile picture of the author shanebob
    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.
    {{ DiscussionBoard.errors[5628902].message }}
  • Profile picture of the author K Meier
    I love how new members dig out year old threads and give absolutely useless answers.
    {{ DiscussionBoard.errors[5634524].message }}
    • Profile picture of the author Nochek
      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
      Signature
      Nochek Solutions Presents:
      The Hydrurga WSO - Rank Your Site #1 And Score Over The Penguin Updates!
      {{ DiscussionBoard.errors[5635564].message }}

Trending Topics