Grow your CSS skills. Land your dream job.

Linking an Image in CSS Form

  • # May 31, 2008 at 1:21 pm

    Ok. so I am a complete newbie when it comes to css. I more or less fool around with this code to setup a band Myspace page for a band that I do sound for. I have used a css code that I got from MikeIndustries.com and have just tweaked some stuff on this code to personalize it. (Btw Mike from mikeindustries.com has provided this code to anyone that would like to use it as a jump off point for a myspace page. So I am not using it illegally!) :D

    My problem lies in adding a link to a masthead image. I want to link it to our bands iTunes page, but am having trouble doing that. I have researched an answer to this question via google, but with no luck! Anyone that has any suggestions or can help me out would be doing me a huge solid and I would appreciate it immensely.

    The code that I have now for this image is:

    <div class="masthead2"><span></span></div>

    .masthead2 {width: 700px; height:140px; position: absolute; margin-left: -350px; left: 50%; top: 200px; background-image: url(http://i67.photobucket.com/albums/h320/ … nner-2.jpg);}

    The image in the url brackets is what I want to be able to create a hoover link to. I’m not sure if thats the right terminology for what I am trying to say, but I basically want someone to be able to hoover their pointer over the image and click it to forward them to our iTunes page.

    The url for this page is http://www.myspace.com/painkillerhotel

    Once again Thank You for any help you can offer!

    Cheers,

    Elliott

    # May 31, 2008 at 2:59 pm

    what you are trying to do is not done with CSS,

    It is simply done with an <a href> tag in your page code.

    if i remember correctly the best way is to

    Code:

    just remember to add border:none to your

    Code:
    .masthead a { }

    so that the blue link border doesn’t show up.

    I thinks thats correct…someone migth come along with a better suggestion.

    # June 6, 2008 at 5:40 pm

    Thanks for the advice, however this seems to not have worked. :( If anyone has any other type of advice on this please let me know. And thank you again for anyone that has or can help me out!

    Elliott

    # June 6, 2008 at 6:01 pm

    use JavaScript!

    <div id="masthead2" onclick="location.href=’http://www.myspace.com/painkillerhotel’;></div>

    .masthead2 {width: 700px; height:140px; position: absolute; margin-left: -350px; left: 50%; top: 200px; background-image: url(http://i67.photobucket.com/albums/h320/ … nner-2.jpg); cursor: pointer;}

    # June 16, 2008 at 10:32 pm

    Adam,

    Thanks for the help unfortunately javascript is a "forbidden" format in the realm of myspace. Using javascript would be violating the "terms" of myspace. But thank you for the input. I still have yet to figure this out so if you have any other suggestions I would greatly appreciate the help!

    Elliott

    # June 17, 2008 at 1:31 am

    try doing this…same as above

    <div id="masthead"><a href="Your url here" style="padding:700px;">&nbsp;</a>

    what you are adding is a non breaking space ( &nbsp; ) as your link then giving it some padding to extend the clickable area the length of the masthead. This is a new technique I have just picked up. Give it a try.

    the & mark is an ampersand (spell check) it’s above the 7

    # June 17, 2008 at 11:39 am

    If I’m looking at your code correctly, you cannot create a link without using <a> and </a>. So, you’ll have to add that in between your div tags.

    Shouldn’t the display:block coupled with fixed height and width on ".masthead2 a" do the trick?

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".