473,809 Members | 2,724 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

how would I make an image inside css to be a link..?

1 New Member
Hello
I am creating a site using css.
in my css, I specify an image to appear in a div tag that is the logo.
I would like that image to be also a link back to the homepage...

how would I write it in the css code?

as of now, this is what it sais in the css code:
Expand|Select|Wrap|Line Numbers
  1. #header {
  2.     height: 75px;
  3.     background:#fff url(http://www.redheadtrainer.com/images/just_logo.gif );
  4. }

how can i make it so the image would also be a link.. or the specific style would be a link?
I am kind of in the dark about this,
any help would be great, thank so much!!!
Sep 2 '10 #1
2 1496
tharden3
916 Contributor
Hi hagit,

If you want a picture that can be clicked on and links back to the home page, I suggest you use a combination of the anchor tag and the image tag in your XHTML.

The "background-image" attribute in CSS is often used to provide non-clickable images that are more for aesthetics.

Try setting up your logo like this:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.  <head>
  3.   <title>ImageHeaderLink.html</title>
  4.  </head>
  5.  <body>
  6.  
  7.  
  8.   <div id = "header">
  9.    <a href = "www.yourwebsite.com/index.html">
  10.    <img src = "logo.jpg"
  11.         height = "80px"
  12.         width = "250px"
  13.         alt = "Our Logo"/>
  14.    </a>
  15.   </div>
  16.  
  17.  
  18. </body>
  19. </html>
  20.  
  21.  
Because the "img" tag is surrounded by an anchor tag (<a></a>), it makes the image link to whatever you specified in the "href" attribute. You still have control over where the image is positioned because it is inside a div.

The CSS "background-image" attribute is often covered with other elements of your web page (like text for instance). For this reason, it should only be used in the background. If you want to use an image for something important, like making it a link, stick with the image tag in XHTML.
Sep 2 '10 #2
tharden3
916 Contributor
It is possible to make the background-image attribute in CSS linkable, but it involves setting some element to "display: block;" and then setting "text-indent:" at about -3000px.

This is more of a sloppy hack, and it is not good form.

Cheers,
Tim
Sep 2 '10 #3

Sign in to post your reply or Sign up for a free account.

Similar topics

1
3729
by: Abs | last post by:
Hi! I need to put an image inside a box, centering and resizing it to fit the box. The box is positioned and sized in the page using percent values. The problem is that I don't know how can I do it exactly. This is the style code for the box: ..box { top: 20%;
2
2122
by: TnaG | last post by:
I have an onClick on a TD. If I click on an image inside the TD, the onClick fires, however if i click anywhere else inside the TD nothing happens. Any ideas?
2
9185
by: Kevin Lyons | last post by:
Hello, Can anyone assist me with what I am trying to do with the following code (six different scenarios to try to make the functionality work correctly)? I want to always (and ONLY) display in the status bar 'Symantec Corporation' whenever anyone mouses over (onMouseOver) my image or link OR when one clicks while holding the left mouse down (onClick) on the same image or link. Upon releasing the mouse (onMouseOut), the
3
6752
by: coolsti | last post by:
I need some help here. I am making an application which allows a user to look at a series of picture files one at a time, and enter the outcome of various visual tests to a database. The application is based on mysql and php on a remote server, and is accessed by the user via a web browser, primarilly IE. The image file names are built up by the server side php scripts, and so a URL for the image file is created, but the file itself is...
10
26198
by: Raghavendra RAV | last post by:
Hi, I need to store an image from a Graphics object(.NET) inside a xml data island. Anyone might have came accross or have an idea how to do this. Please share. Thanks & Regards, Raghu, CSS India +91 98402 56561
3
2702
by: Sachin | last post by:
If I have an image inside the RichTextBox, can I drag/move it inside the RichTextBox with the help of mouse, just like we can move any control on the form during design time. Please guide -- sachin
1
1833
by: Chris Leffer | last post by:
Hi. I have an image inside a repeater that needs an onclick event, dynamically generated. I have this code on my .aspx: <IMG onclick='<%# "toggleDetails('" & DataBinder.Eval(Container.DataItem,"code") & "',this);"%>' src="../Images/show.gif" style="cursor: hand;" /> If I run the page, the code works ok, but when I try to see the page
5
2108
by: Carlos Albert | last post by:
Hi everyone, Is there a way to make a column that has an image with a hyperlink on it? Cause I know how to make a hyperlink column, and a image column, but not how to mix it both... Tnx!
17
2171
by: HornyLaBelle | last post by:
I'm hiding the email address on a website with this javascript which works fine: --------------------------------- <p>Send your comments and questions to our <script language=javascript> <!-- var contact = "Newsletter Editor"
6
3206
by: Karl | last post by:
Hi, Ok so on a given page I have 4 text links: see it in black see it in blue see it in red see it in green using the standard swap image behavior, clicking on one of the above links
0
9721
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
10376
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
10114
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9198
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7651
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6880
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5548
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
4331
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
3860
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.