Adobe Community: making background image clickable link

Currently Being Moderated

1. Nancy O.,

Aug 7, 2012 9:36 AM in reply to dawnnolan54

Report

You can't. Background images are not part of the HTML; they are part of the CSS.

To make images clickable aka hyperlinked you need to insert them into your HTML.

Hyperlinked image:

Nancy O.

|

Mark as:

Currently Being Moderated

2. osgood_,

Aug 7, 2012 9:39 AM in reply to dawnnolan54

Report

dawnnolan54 wrote:

I have several div tags with background images in them. I want to make the background images clickable links. what is the easiest way to do this?

Yes,

Include an anchor tag in the div:

Then set the anchor tags css attributes to the width and height of the <div> and display: block; which makes the whole area clickable.

a {

display: block;

width: widthOfDiv;

height: heightOfDiv;

}

|

Mark as:

Currently Being Moderated

3. Jon Fritz II,

Aug 7, 2012 9:49 AM in reply to osgood_

Report

Osgood is on the right track. I would only add a small amount of additional CSS...

</div>

Then set the anchor tags css attributes to the width and height of the <div> and display: block; which makes the whole area clickable.

#yourdivid {

height:100px;

width:100px;

}

#yourdivid a {

display: block;

width: 100px;

height: 100px;

}

This way, only the <a> tags within a div with id="yourdivid" will be affected.

|

Mark as:

Currently Being Moderated

4. MurraySummers,

Aug 7, 2012 9:53 AM in reply to dawnnolan54

Report

Not valid HTML to put an anchor tag around a div. Anchors are inline and divs are block. You can't put block into inline.

|

Mark as:

Currently Being Moderated

5. Rik Ramsay,

Aug 7, 2012 10:20 AM in reply to dawnnolan54

Report

I have used this method consistenly without issue:

#YourDivID {

background-image: url(YourImageLocation);

background-repeat:no-repeat;

display:block;

width:??px;

height:??px;

margin:0;

}

|

Mark as:

Currently Being Moderated

6. MurraySummers,

Aug 7, 2012 10:24 AM in reply to Rik Ramsay

Report

I think that's a winner. The wrapping div is unnecessary.

|

Mark as:

Currently Being Moderated

7. hans-g.,

Aug 7, 2012 12:47 PM in reply to Rik Ramsay

Report

Maybe interesting, a little variation with Rik's rules: http://hansgd.de/AdobTest/_Backgr/backgr.php

|

Mark as:

Currently Being Moderated

8. Mark-2012,

Jan 1, 2013 10:47 PM in reply to dawnnolan54

Report

Yes, the background image can be made clickable.

Here is the link to get the info to one method: http://ran.ge/2009/11/11/css-trick-turning-a-background-image-into-a-c lickable-link/

Basically it is written like this:

==CSS==

#bkgrdimage {

background-image:url ('image.png');

display:block;

height:??px; (image height)

width:??px; (image width)

text-indent:-9999px;

}

==HTML==

<a href="http://????" title="Title of Link" id="bkgrdimage">Basic Text For this Link</a>

---------------

The text indent places the "basic text for this link" outside the browser screen.

|

Mark as:

Currently Being Moderated

9. BorneZeus,

Mar 10, 2013 5:27 AM in reply to dawnnolan54

Report

http://ran.ge/2009/11/11/css-trick-turning-a-background-image-into-a-c lickable-link/

|

Mark as:

Dreamweaver

making background image clickable link

Aug 7, 2012 9:29 AM

More Like This

Bookmarked By (0)

Answers + Points = Status