Making background image clickable link

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, 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-clickable-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.

Similar Messages

CSS Background Image Clickable?

A client asked me to add an image on every page in an
editable area eclipsing where I already have two divs (one is a
title area and the other is text that goes under it). Both those
divs are inside another div. I put the image as a background (no
repeat) to the div that holds the other two and it fits perfect.
But I need it to be clickable to another page. Any suggestions how
I might do that? Can I somehow make the background image clickable?
Can I make just that area of the div clickable? Keep in mind that
the image is behind the corners of the other two divs. Here is the
code:
<td width="514" valign="top">
<div id="services_right">
<div id="services_copy">
<div id="services_subsub">
<h2></h2>
</div>
<div align="left">
<p> </p>
</div>
</div> </div> </td>
Thanks,
Brian

> How do you deal with that?
Either -
1. Do the insertion of a server-side include
programmatically, e.g., based
on the current page name, or
2. Leave an editable region for the secondary navigation, and
drop the
desired include file into the editable region.
Either approach is SO MUCH SIMPLER than using nested
templates.
> Can you do it all with CSS and be able to update
correctly?
I do quite a few sites where I am changing the physical
layouts using CSS
alone, yes.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"yevri" <[email protected]> wrote in message
news:[email protected]...
> Here's what I did to resolve this. I gave up on the
clickable background
> image.
> While I think you can do it, this site is a bit
complicated with nested
> templates and a lot of CSS and structures - some of
which are new and some
> are
> inherited from a previous developer, so it's a bit messy
right now. So I
> just
> redid the CSS in that content area of my nested template
until I could put
> divs
> side by side and put an image in the foreground instead
of the background.
> Now
> it's working fine. But that clickable background image
may come in handy
> later.
>
> One other thing though, Murray mentioned nested
templates not being worth
> the
> hassle - causing more work and inefficiencies. I've
heard others say that
> they
> are a bad idea too. What I wonder is, how would someone
deal with a
> situation
> like this (that I find myself in on most sites) where
you have a header
> and
> footer and content area in the middle and then a section
in the site that
> has
> an interior design with a second level of nav (possibly
down the left side
> like
> mine) and usually in the content area. How do you deal
with that? I create
> a
> template for the header and footer and then a nested
template for the
> secondary
> design/nav. I have 50 pages in that interior design
section that have
> their own
> design built on the main template design (the site on
this post might not
> be a
> good example because it's a Frankenstein's Monster from
multiple
> developers and
> old and new ways of coding). What about an interior nav
with collapsing
> links,
> etc. How do you get that onto every page without a
template? Can you do it
> all
> with CSS and be able to update correctly? Just curious
to what you use
> instead
> of nested templates?
>
> Thanks again for the help on this.
>

Help needed making background image a clickable link

Hi guys,
I want to make the background of my site an advertising background where the background image is clickable.
I've tried a few tutorials but none seem to be working
What I've got is this as my CSS...
#skin {position: absolute;
    width: 100%;
    height: 800px;
    margin-left: auto;
    margin-right: auto;
    top: 0px;
    left: 0px;
    z-index: -1;
    background-position: fixed;
...and this as my HTML...
<div id="skin"><a href=""><img src="background.jpg" /></a></div>
It kind of works but the link is only a thin strip either side of the screen for some reason and doesn't span the whole image background.
Does anyone have any ideas as to where I'm going wrong?
Thank you very much and hope to hear from you!
SM

Spindrift wrote:
Basically, what I want to do is have an advertising skin as the background (can just be a dummy container div to act as the background) of my website, so that it fills the area outside my sites' container div and opens a link when clicked on.
Does anyone know how I can do this?
This can be done relatively easily but it's not very pretty. You will need to use a full-size image for the background, unless you plan to repeat it and set the clickable container to exactly that size. See code and screenshot below. Tested in FF, Chrome and IE9.
<head>
<style>
body {
    width:100%;
    height:100%;
    margin:0;
#background {
    background: #000 url(your-background-image.jpg) no-repeat 0 0;
    display: block;
    height: 1280px; /* change to your image height */
    position: fixed;
    width: 1920px; /* change to your image width */
#wrapper {
    background-color: #FFFFFF;
    border: 1px solid #333333;
    left: 50%;
    margin-left: -480px; /* half the width */
    min-height: 500px;
    position: absolute;
    width: 960px; /* wrapper width - unclickable area */
</style>
</head>
<body>
<a href="" id="background"></a> 
    <div id="wrapper"> 
        <header>
        </header>
        <main>
        </main>
        <footer>
        </footer>
    </div>
</body>

Background Image & hotspot/links

How can I make a hotspot of a table cell which has a
background image?
I have a table with 9 cells, all of which have different
background images and text inside them.
I had to make the images background in order to make the text
so the page improves on search engine rankings, so i can't insert
images and attach links to them.
Just linking the text is no good either.
Hope you can help.
thanks

Hello,
You can link the text and expand the link area to fill the
table cell.
Try the code below.
Does that work?
<style type="text/css">

</style>
<table width="600" border="0" cellspacing="2"
cellpadding="0">
<tr>
<td class="celllink"><a
href="something.htm">Test</a></td>
<td class="celllink"><a
href="something.htm">Test again</a></td>
<td class="celllink"><a
href="something.htm">Test once more</a></td>
</tr>
</table>
Something to be aware of:
Users with a different text size setting in their browser
will result in the
text being in a different spot over the image and possibly
even beyond it.
Take care,
Tim
"little bob" <[email protected]> wrote in
message
news:gqovag$b97$[email protected]..
> Thanks,
>
> yes, that does make sense, but wont the transparent
image push down the
> text in the cell?
>
>

Having trouble making background image editable in template

Hello this is my first time so here goes...
I would like to make a template from a page I have created,
the trouble is the background image is url background image placed
in css with text over the image, the problem I have is on further
pages I would like to keep same divs
but would like the freedom to change text and bground image.
I have tried to make text an editable region which works and
bground image make attribute editable but I do not really
understand how this works any ideas would be much appreciated here
is my site address
http://www.andysite.prohost4u.co.uk
cheers

I'm confused, I dont see that you have a background image in
your css.
"WILLO THE WISP" <[email protected]> wrote
in message
news:[email protected]...
>
Hello this is my first time so here goes...
> I would like to make a template from a page I have
created, the trouble is
> the
> background image is url background image placed in css
with text over the
> image, the problem I have is on further pages I would
like to keep same
> divs
> but would like the freedom to change text and bground
image. I have tried
> to
> make text an editable region which works and bground
image make attribute
> editable but I do not really understand how this works
any ideas would be
> much
> appreciated here is my site address
http://www.andysite.prohost4u.co.uk
> cheers
>
>
> Here is my css
> * {
> margin : 0 auto;
> padding : 0;
> }
> body {
> background-color : #ffffff;
> text-align : center;
> font-family : "Square721 BT", "Staccato222 BT", Courier;
> font-size : 100%;
> background-position : center center;
> }
> #container {
> font-family : "Square721 BT", "Staccato222 BT", Courier;
> background-color : #ffffff;
> width : 780px;
> }
> #header {
> width : 780px;
> height : 280px;
> margin-top : 10px;
> margin-bottom : 10px;
> }
> #content {
> background-image: url(images/content_bground.gif);
> float: left;
> height: 400px;
> width: 430px;
> }
> #content h1 {
> font-size : 115%;
> width : 390px;
> color : #00ccff;
> text-align : left;
> padding-left : 60px;
> padding-top : 40px;
> padding-bottom : 10px;
> }
> #content p {
> font-size : 80%;
> width : 310px;
> text-align : justify;
> text-indent : 20px;
> color : #66FFFF;
> }
> #content h2 {
> font-size : 80%;
> width : 420px;
> color : #00ccff;
> text-align : left;
> padding-left : 60px;
> height : 70px;
> padding-top : 10px;
> }
> #sidebar {
> background-image : url(images/sidebar_bground.gif);
> width : 340px;
> height : 400px;
> float : right;
> }
> #sidebar ul {
> font-size : 60%;
> line-height : 22px;
> list-style-image : url(images/bullet.gif);
> list-style-position : outside;
> text-align : left;
> color : #66FFFF;
> padding-top : 45px;
> padding-left : 62px;
> }
>
> #clear {
> clear : both;
> }
> #footer {
> background-image : url(images/footer_bground.gif);
> width : 780px;
> height : 80px;
> margin-bottom : 10px;
> margin-top : 10px;
> position: fixed;
> }
> #footer p {
> text-align : center;
> font-size : 75%;
> color : #66ffff;
> padding-top : 24px;
> }
> #footer ul {
> margin : 2px;
> }
> #footer li {
> display : inline;
> margin : 0;
> }
> #footer a:link, #footer a:visited {
> color : #00ccff;
> margin : 2px;
> }
> #footer a:hover, #footer a:active {
> color : #00FFFF;
> text-decoration : none;
> background-color : #33cccc;
> }
> a:link {
> color : #00ccff;
> text-decoration : none;
> }
>
> a:visited {
> text-decoration : none;
> color: #00CCFF;
> }
> a:hover {
> text-decoration : underline;
> color: #00FFFF;
> }
> a:active {
> text-decoration : none;
> color: #006699;
> }
>

Link on background image

I created and inserted a background image in the Container. It includes "link buttons" built into the image in Photoshop, meaning images intended to be clicked in order to move to another page. I can't create hotspots/image maps to use to create links because the image is a background image.
How do I create the actual hyperlinks to make the "buttons" function as navigiation links?
Thanks for your suggestions.
Barry

Google is your friend.
Search term
"Links on background images"
First link in search result
http://xavisys.com/css-trick-turning-a-background-image-into-a-clickable-link/
#yourdiv {
    background-image:url(image.png);
    display:block;
    height:58px;
    text-indent:-9999px;
    width:200px;
You will need to style the position of the div(s)
Learn CSS
Shane

Resizing 1) background images and 2) div's containing images

I just created a web page consisting of little more than an image (about 900 pixels) wide which is set at width=100% in a style sheet. It works great, but I'd like to substitute a smaller image (to reduce page loading time) in mobile devices.
If it was a background image, I could just declare two different background images based on screen size, but I don't know of any way to swap between images actually inserted in a page.
So, is it possible to give a background image a width in percentage, similar to a static image? In other words, if my screen was 651 pixels wide, then a static image inside a container spanning the entire screen should also be 651 pixels wide. Can I rig it so that a background image in that container would also be 651 pixels wide?
Of course, the obvious problem is height. If a background image measures 900 X 1200 pixels, and a screen is 600 pixels wide, then even if there's a style that makes the image 600 pixels wide, it would also have to calculate a height of 800 pixels, and I'm guessing that can't be done.
Anyway, I'd just like to know what kinds of tricks one can use in making background images and divs containing static images display in percentages based on screen size.
Thanks.

Use background-size:cover; for your background images.
Further reading: http://css-tricks.com/perfect-full-page-background-image/
EDIT:// For swapping out placed images, it's a little harder to do right now as there is no specified solution from W3C. Some people want to use the srcset attribute, others the <picture> tag. There is no perfect approach right now. See: http://mobile.smashingmagazine.com/2013/08/21/webkit-implements-srcset-and-why-its-a-good- thing/
One idea is you could hide the image and then load a background-image in the container which is smaller in size. But this would likely bloat your HTML and CSS as you use multiple images - the device will also load both images so you don't gain any real advantage unless you intend to show a croppoed or different image.
Other ideas: http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/
<div class="image">
     <img src="YourImage.jpg" alt="" width="500" height="250" />
</div>
@media only screen and (max-width: 480px) {
     .image img {display:none;}
     .image {
          background:url("YourImage_Mobile.jpg") no-repeat 0 0;
          background-size:cover;
Another idea is to show/hide the relevant image:
<img src="YourImage.jpg" alt="" width="500" height="250" class="desktop" />
<img src="YourImage_mobile.jpg" alt="" width="300" height="180" class="mobile" />
@media only screen and (max-width: 480px) {
     .desktop {display:none;}
     .mobile {display:block;}

How to add a link in a header created only of a background image

Hi, I created my website with CSS in Dreamweaver. Here is a sample page:
http://www.bfranklincrafts.com/NewSite/BonneyLCalendar.html
The header is created with a background image. How do I put in a link in the header that when they click on Ben Franklin Crafts & Frames would take them to the home page? I have nothing to attach my link to?!?!
Thanks.
Liolee

Putting a clearpixel or transparent.gif over your background image won't work very well if CSS is turned off.
My preference would be to take your Business Name out of the background image and replace it with real text inside an <h1> tag in the foreground - where it will be visible to search engines, screen readers and translators.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

A a:link has background image

I have a bkg img in my nav and bottom nav. (navBkg.jpg) These navs are styled very specifically for the nav and bottom Nav in my css. However all the a links are displaying this background, rather than just the nav and bottom Nav. You can see it in the lower box (Eva prim's Snack of the Week Club) where it says "...read more."
http://carriecoren.com/test/Sept9
here's the css:
@charset "UTF-8";
#column3 img {
          margin-left: 10px;
@font-face
font-family: myFirstFont;
src: url(Gondola_SD.ttf);
          margin:0;
          padding:0;
a, a:link, a:hover {
                    background-image: url(../images/whtBkg.jpg);
body {
          font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
          font-size: 14px;
          color: #222;
          line-height: 18px;
          margin-right: auto;
          margin-left: auto;
          text-align: left;
          background-image: url(../images/blue_bg_vert.jpg);
          background-repeat: repeat-x;
          background-color: #000;
#container {
          width: 960px;
          margin-right: auto;
          margin-left: auto;
          margin-top: 0px;
          margin-bottom: 0px;
          text-align: left;
          background-color: #FFF;
          background-image: url(../images/containerBkg.jpg);
          background-repeat: repeat-y;
#content {
          width: 920px;
          padding-right: 20px;
          padding-left: 20px;
#header {
          background-image: url(../images/header.jpg);
          background-repeat: no-repeat;
          padding: 0px;
          height: 280px;
          width: 960px;
          text-indent: -9999px;
          margin-top: 0px;
          margin-right: 0px;
          margin-bottom: 0px;
          margin-left: 0px;
/* column 1 */
#column1 {
          width: 590px;
          margin-top: 30px;
          margin-right: 0px;
          margin-bottom: 20px;
          margin-left: 10px;
          border: medium solid #888;
          background-image: url(../images/column1art.jpg);
          padding-bottom:50px;
          float: left;
#column1 p{
          font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
          font-size: 14px;
          color: #222;
          line-height: 22px;
          padding-left: 253px;
          padding-right:10px;
          padding-bottom:10px;
#column1 h1{
          font-weight:normal
          font-family: Gondola_SD.ttf;
          font-family: "Gondola SD", "Gondola SD - Swash";
          padding-top: 20px;
          padding-left: 240px;
          padding-bottom:10px;
          font-size: 20px;
          word-spacing: 95%;
          text-transform: uppercase;
          line-height: 30px;
          text-align: center;
/* column 2 */
#column2 {
          background-color: #FFF;
          padding: 0px;
          width: 250px;
          margin-top:30px;
          margin-right: 20px;
          margin-bottom: 0px;
          margin-left: 10px;
          float: right;
          padding: 0px;
#column2 li {
          list-style-type: none;
          display: inline;
          padding: 0px;
          margin-top: 0px;
          margin-right: 8px;
          margin-bottom: 0px;
          margin-left: 0px;
#column2 a, a:link {
          margin-top: 0;
          margin-right: 0px;
          margin-bottom: 0;
          margin-left: 0;
          padding-top: 0;
          padding-right: 0;
          padding-bottom: 0;
          padding-left: 0;
/* column 3 */
#column3 {
          width: 550px;
          margin-right: 0px;
          margin-bottom: 20px;
          margin-left: 10px;
          border: medium solid #888;
          padding: 20px;
          float: left;
          height: px;
          background-color: #FFF;
#column3 p{
          font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
          font-size: 14px;
          color: #222;
          line-height: 22px;
#column3 h2{
          font-weight:normal
          font-family: Gondola_SD.ttf;
          font-family: "Gondola SD", "Gondola SD - Swash";
          padding-bottom:10px;
          font-size: 16px;
          word-spacing: 95%;
          text-transform: uppercase;
          line-height: 30px;
          text-align: left;
#column3 a, a:link{
          color: #33C;
          background-color: #FFF;
          background-repeat: no-repeat;
#column3 a:hover{
          color: #33C;
          font-weight: bold;
h1{
          padding-bottom:10px;
          font-weight:normal
          font-family: Gondola_SD.ttf;
          font-family: "Gondola SD", "Gondola SD - Swash";
          padding-top: 20px;
          font-size: 20px;
          word-spacing: 95%;
          text-transform: uppercase;
          line-height: 30px;
          text-align: center;
/* the main nav */
#nav {
          width: 960px;
          height: 35px;
          margin-bottom: 10px;
          padding-top: 5px;
          padding-right: 0px;
          padding-bottom: 0px;
          padding-left: 0px;
          text-align: center;
          font-size: 14px;
          line-height: 30px;
          font-family: "Gondola SD", "Gondola SD - Swash";
          border-top-width:thin;
          border-color:#000;
          background-image: url(../images/navBkg.jpg);
          background-repeat: repeat;
#nav ul { /* this is the main nav list */
          list-style:none;
          margin-bottom:0px;
          width:100%;
          margin-top: 0px;
#nav li {
          display: inline;
          background-image: url(../images/navBkg.jpg);
          background-repeat: repeat-x;
#nav li a, a:link {
          padding-right:25px;
          padding-left:15px;
          text-decoration:none;
          background-image: url(../images/navBkg.jpg);
          background-repeat: repeat-x;
          vertical-align: bottom;
          width: 100%;
          padding-top: 0px;
          padding-bottom: 0px;
          margin-top: 0px;
#nav li a:hover{
          background-image: url(../images/navBkgHover.png);
          background-repeat: repeat-x;
          padding-top: 6px;
          margin-top: 0px;
          width: 100%;
/* bottom nav */
#bottomNav {
          width: 960px;
          background-color: #003399;
          margin: 0px;
          padding-top: 0px;
          padding-bottom: 0px;
          border-top-width: 9px;
          border-top-style: solid;
          border-top-color: #000;
          text-align: center;
          background-image: url(../images/navBkg.jpg);
          background-repeat: repeat-x;
          float: left;
          height: 25px;
#bottomNav ul {
          list-style:none;
          font-weight:bold;
          margin-bottom:0px;
          margin-top: 0px;
          padding-top: 0px;
          padding-bottom: 0px;
#bottomNav li {
          margin-right:0px;
          position:relative;
          padding-right: 10px;
          padding-left: 10px;
          padding-top: 0px;
          padding-bottom: 0px;
          display: inline;
#bottomNav a, a:link {
          margin-right:0px;
          padding-right: 10px;
          padding-left: 10px;
          padding-top: 7px;
          padding-bottom: 7px;
          display: inline;
          margin-top: 10px;
          margin-bottom: 0px;
          color: #DDD;
#bottomNav a:hover {
          color:#DDD;
          background:#660000;
#pinterest {
          width: 250px;
          margin-right: 0px;
          margin-bottom: 20px;
          margin-left: 0px;
#twitter {
          background-color: #FFF;
          width: 250px;
          margin-right: 0px;
          margin-bottom: 20px;
          margin-left: 0px;
          height: 100%;
          margin-top: 15px;
#social {
          width: 250px;
          height: 58px;
          background-color: #FFF;
#copyright {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 9px;
          line-height: 20px;
          color: #222;
          text-align: center;
          width: 100%;
          float: left;
#contact {
          margin: 0px;
          height: 140px;
          width: 50px;
          padding-right: 10px;
          padding-left: 20px;
          border: thin solid #222;
          padding-top: 40px;
.clear {
          width: 900px;
          color: #EEE;
          margin-top: 100px;
          margin-right: 0px;
          margin-bottom: 0px;
          margin-left: 0px;
          clear: both;
#container #content #clear {
          width: 700px;

OK, you didn't need to post your CSS here, it's available on the page.
But I am confused. Perhaps I am misreading you here.
You have your bottom nav and your top nav. Then you have your "read more" which is not nav-it's just a link. Doesn't have your nav background.
When you set the rules for links for Column 3, you set the way the "read more" would work:
#column3 a, a:link{
          color: #33C;
          background-color: #FFF;
          background-repeat: no-repeat;
#column3 a:hover{
          color: #33C;
          font-weight: bold;
So when you hover, it turns bold and maintains the same color. And the background for links in Column 3 is white, which is the background for column 3. Really not needed.
Additionally, the W3C Validator is finding problems with your page. Please fix those, then get back to us.

Replacing images used as a link with background image

OK - I'm embarrassed to say that what I'm trying to do is
blindingly
obvious, and I've used Dw for several years - and do most of
the work
in code view but I'm having a senior moment and can't do what
I want.
I've read that when you use images on a page for background
styling,
for example the logo, or an image of a professional body such
as IEE,
it is more semantically correct to use CSS background images
rather
that a <img src=
tag
So I have a div in which I put the background, but then
perhaps quite
logically you can't directly put a link to it. So how do you
do it.
I've tried to ensure there was a block element so when you
hover l
mouse over it you get a block link - but no joy.
maybe my dyslexia early is the sign of premature brain fade
~Malcolm N....
~

You cannot place a link on a background image. However, you
can place a
link on a transparent image floated over the background.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Malcolm N_" <[email protected]> wrote in message
news:[email protected]..
>
> OK - I'm embarrassed to say that what I'm trying to do
is blindingly
> obvious, and I've used Dw for several years - and do
most of the work
> in code view but I'm having a senior moment and can't do
what I want.
> !!!
>
> I've read that when you use images on a page for
background styling,
> for example the logo, or an image of a professional body
such as IEE,
> it is more semantically correct to use CSS background
images rather
> that a <img src=
> tag
>
> So I have a div in which I put the background, but then
perhaps quite
> logically you can't directly put a link to it. So how do
you do it.
>
> I've tried to ensure there was a block element so when
you hover l
> mouse over it you get a block link - but no joy.
>
> maybe my dyslexia early is the sign of premature brain
fade ;-)
>
> --
>
> ~Malcolm N....
> ~

Image map + link in background image

Is it possible to put an image map and link to a background
image of a table?

no but you can put a 1px by 1 x blank transparent image over
the background image and add an image map to that

Fitting background image size according to link text

I am using a list for my navigation. I have a background
image which is shown on the LI. If the text in the link is longer
than the width of the image then the background image is repeated.
How can I stretch the width of the image?
Does it look like I am putting the background image in the
right place? Am I doing this right? Thanks a lot
<style type="text/css">
BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: small;
PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000; PADDING-TOP: 0px;
FONT-FAMILY: "Trebuchet MS", arial, helvetica, sans-serif;
BACKGROUND-COLOR: #fff; TEXT-ALIGN: center; min-width: 740px
#navbar {CLEAR: both; MARGIN: 0px; WIDTH: 760px;
bgColor=#cccccc
#navbar LI {
background-image: url(britishalliance/navback.gif);
PADDING-RIGHT: 0px; DISPLAY: inline; PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px;
LIST-STYLE-TYPE: none
#navbar UL {
LIST-STYLE-TYPE: none;
#navbar A:link {
background-image: url(britishalliance/navback.gif);
BORDER-RIGHT: #c63 1px solid; PADDING-RIGHT: 6px;
PADDING-LEFT: 6px; FONT-SIZE: 12px; FLOAT: left; PADDING-BOTTOM:
5px; COLOR: black; LINE-HEIGHT: 10px; PADDING-TOP: 5px;
WHITE-SPACE: nowrap; TEXT-DECORATION: none
</style>
<DIV id=navbar>
<UL><LI><A href="">aaaaaa aaaa
aaaaaaaaaa</A>
<LI><A href="">aaaaa aa aa aaaaaaaa</A>
<LI><A href="">aaaaa aa aaaaaaaa</A>
<LI><A href="">aaaaaaaaa</A>
<LI><A href="">aaaaaaaaaaaaa aaaaaaaaa</A>
<LI><A href="">aaaaaa aa</A></LI>
</UL></DIV>

> How can I stretch the width of the image?
You cannot. But you can prevent it from tiling with CSS.
> Does it look like I am putting the background image in
the right place?
It's not necessary to have it on both the <a> and the
<li> tags.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Hydrowizard" <[email protected]> wrote in
message
news:[email protected]...
>I am using a list for my navigation. I have a background
image which is
>shown
> on the LI. If the text in the link is longer than the
width of the image
> then
> the background image is repeated. How can I stretch the
width of the
> image?
> Does it look like I am putting the background image in
the right place? Am
> I
> doing this right? Thanks a lot
>
> <style type="text/css">
> BODY {
> PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: small;
PADDING-BOTTOM:
> 0px;
> MARGIN: 0px; COLOR: #000; PADDING-TOP: 0px; FONT-FAMILY:
"Trebuchet MS",
> arial,
> helvetica, sans-serif; BACKGROUND-COLOR: #fff;
TEXT-ALIGN: center;
> min-width:
> 740px
> }
> #navbar {CLEAR: both; MARGIN: 0px; WIDTH: 760px;
bgColor=#cccccc
> }
> #navbar LI {
> background-image: url(britishalliance/navback.gif);
> PADDING-RIGHT: 0px; DISPLAY: inline; PADDING-LEFT: 0px;
PADDING-BOTTOM:
> 0px;
> MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
> }
> #navbar UL {
> LIST-STYLE-TYPE: none;
> }
> #navbar A:link {
> background-image: url(britishalliance/navback.gif);
> BORDER-RIGHT: #c63 1px solid; PADDING-RIGHT: 6px;
PADDING-LEFT: 6px;
> FONT-SIZE: 12px; FLOAT: left; PADDING-BOTTOM: 5px;
COLOR: black;
> LINE-HEIGHT:
> 10px; PADDING-TOP: 5px; WHITE-SPACE: nowrap;
TEXT-DECORATION: none
> }
> </style>
>
>
> <DIV id=navbar>
> <UL><LI><A href="">aaaaaa aaaa
aaaaaaaaaa</A>
> <LI><A href="">aaaaa aa aa
aaaaaaaa</A>
> <LI><A href="">aaaaa aa aaaaaaaa</A>
> <LI><A href="">aaaaaaaaa</A>
> <LI><A href="">aaaaaaaaaaaaa
aaaaaaaaa</A>
> <LI><A href="">aaaaaa
aa</A></LI>
> </UL></DIV>
>

Random Image with Clickable Link

Hey guys so far I found a code that lets me randomize an image and I found out a piece of code that makes the image clickable but I do not know how to add a specific link to each specific image.
Here is the code:
<head> <script language="JavaScript">
var theImages = new Array()
theImages[0] = 'Accounting Cartoon1.jpg'
theImages[1] = 'Accounting Cartoon2.jpg'
var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<a href="link.html"><img src="'+theImages[whichImage]+'"></a>');}
//-->
</script>

anyone have an idea?

Making clickable links in GUI?

Hi,
Well, I'm making an GUI application and I wanted to have a clickable link to my website, I thought using HTML would be a good bet, but it doesn't work, I was thinking of using util but I'm not exactly sure..

Swing related questions should be posted in the Swing forum.
JEditorPane provide some basic support for loading HTML pages. Read the API for more info.
You can invoke IE as follows:
** Here is a pure Windows solution
** Run the code and you will be taken to a tutorial that may provide
** a more generic solution
public class WindowsFileProtocolHandler
     public static void main(String[] args)
          throws Exception
          String[] cmd = new String[4];
          cmd[0] = "cmd.exe";
          cmd[1] = "/C";
          cmd[2] = "start";
          cmd[3] = "http://www.javaworld.com/javaworld/javatips/jw-javatip66.html";
//          cmd[3] = "will.xls";
//          cmd[3] = "mailto:";
//          cmd[3] = "a.html";
//          cmd[3] = "file:/c:/java/temp/a.html";
          Process process = Runtime.getRuntime().exec( cmd );
}

Making Main Images Links in Photo Gallery

Hello.
I've made an image gallery and it works great. What I want to do is make the main image a link to a certain part of the site. The first link works great, but then I get: TypeError: Error #1009: Cannot access a property or method of a null object reference.
at Rockit_Front_Ad_fla::MainTimeline/frame1().
Basically, I made an invisible button on each main image for the link.
Can anyone help? Just want the links to work and can't get it. Any help is greatly appreciated. My AS3 is below:
Mike
stop();
Button1.addEventListener(MouseEvent.CLICK,showPic1);
Button2.addEventListener(MouseEvent.CLICK,showPic2);
Button3.addEventListener(MouseEvent.CLICK,showPic3);
Button4.addEventListener(MouseEvent.CLICK,showPic4);
Button5.addEventListener(MouseEvent.CLICK,showPic5);
Button6.addEventListener(MouseEvent.CLICK,showPic6);
Button7.addEventListener(MouseEvent.CLICK,showPic7);
IMG1.addEventListener(MouseEvent.CLICK,IMG1ClickHandler);
IMG2.addEventListener(MouseEvent.CLICK,IMG2ClickHandler);
IMG3.addEventListener(MouseEvent.CLICK,IMG3ClickHandler);
IMG4.addEventListener(MouseEvent.CLICK,IMG4ClickHandler);
IMG5.addEventListener(MouseEvent.CLICK,IMG5ClickHandler);
IMG6.addEventListener(MouseEvent.CLICK,IMG6ClickHandler);
IMG7.addEventListener(MouseEvent.CLICK,IMG7ClickHandler);
function showPic1(Event:MouseEvent):void{
gotoAndStop("Pic1");
function IMG1ClickHandler(Event:MouseEvent):void{
navigateToURL(new URLRequest("http://www.rockitmusic.com/products.asp?cat=31"));
function showPic2(Event:MouseEvent):void{
gotoAndStop("Pic2");
function IMG2ClickHandler(Event:MouseEvent):void{
navigateToURL(new URLRequest("http://www.rockitmusic.com/proddetail.asp?prod=BOOGIETA15"));
function showPic3(Event:MouseEvent):void{
gotoAndStop("Pic3");
function IMG3ClickHandler(Event:MouseEvent):void{
navigateToURL(new URLRequest("http://www.rockitmusic.com/products.asp?cat=61"));
function showPic4(Event:MouseEvent):void{
gotoAndStop("Pic4");
function IMG4ClickHandler(Event:MouseEvent):void{
navigateToURL(new URLRequest("http://www.rockitmusic.com/proddetail.asp?prod=MM25THANN"));
function showPic5(Event:MouseEvent):void{
gotoAndStop("Pic5");
function IMG5ClickHandler(Event:MouseEvent):void{
navigateToURL(new URLRequest("http://www.rockitmusic.com/products.asp?cat=14"));
function showPic6(Event:MouseEvent):void{
gotoAndStop("Pic6");
function IMG6ClickHandler(Event:MouseEvent):void{
navigateToURL(new URLRequest("http://www.rockitmusic.com/products.asp?cat=27"));
function showPic7(Event:MouseEvent):void{
gotoAndStop("Pic7");
function IMG7ClickHandler(Event:MouseEvent):void{
navigateToURL(new URLRequest("http://www.rockitmusic.com/products.asp?cat=49"));

That error usually means that some object doesn't exist in the frame where the Actionscript is located, or, that some object does not have an instance name. So, for instance, if your Actionscript is in frame 1, then Button1 through Button7 and IMG1 through IMG7 also need to be on frame 1.

Making background image clickable link

Similar Messages

Maybe you are looking for