View Full Version : how to create a hotspot in a Div?

08-19-2010, 08:19 AM
Hi, I can't seem to get my hotspot option to appear for this Code which contains the logo and the comany name text, these are in different div's. Will the hotspot option only appear for an image, because when I insert an image the hotspot option appears but then again, my logo is an image, is it becuase it is in a div?

<p id="logo" name="logo"><br />
<p class="logoText">Company Name</span><br />
<span class="businessCentre">

08-19-2010, 08:27 AM
hotspot ? you mean a link? you can add a link to text or image

08-19-2010, 08:33 AM
perhaps I am missing something? I want to create the area around that div as a hotspot so when you hit anywhere on this area it will bring you back to the homepage, I can't seem to link my image and when I hyperlink my text area it creates lines under my text which I don't want. I just thought perhaps I could map a hotspot around this area and create a hyperlink to the homepage that way??

08-19-2010, 09:07 AM
you can style a link however you want using css

08-19-2010, 10:46 AM
Thanks edbr but I still can't figure it out how to hyperlink this, I found this code for no underline on hyperlink:-

type="text/css"> <!-- A:link {text-decoration:none} A:visited
{text-decoration:none} --> </style>

Would you know where I put that code in the sample I have put in the above post.
I haven't a clue how to hyperlink the image as everytime I go to do that it creates text outside the div which is the hyperlink. Just wish I could hot spot over these, so much simpler, sorry still learning obviously. :(

08-19-2010, 10:59 AM
An image can be a hyperlink. It doesn't neccessarily need text.

08-19-2010, 11:08 AM
Hotspots were invented for image maps, so that you can link different parts of an image. They won't work on a div. If you want to make a link form a div than you need javascript which is also not a good option (link won't work if users have javascript disabled in their browser).

You can fake the linkable div with CSS by something like this:

<a class="logo" href="index.html"></a>
<a class="slogan" href="index.html">company slogan</a>

a.logo, a.slogan {
display: block;
float: left;
text-decoration: none;

/* lets say that your logo is 200px by 80px */
a.logo {
width: 200px;
height: 80px;
background: url('images/logo.gif');

a.slogan {
width: 400px; /* set the width you need for the slogan */
height: 80px; /* same height as the logo */
You might need to set padding on the a.slogan to line it up nicely with your logo, but than you'll have to adjust your width and height of the a.slogan too (CSS box-modal).

I didn't test it but it should be working like this.

08-19-2010, 01:39 PM
Thank you for that, at least I know it is Java and I am truely fe*ked. I copied your css etc and the "Company slogan is still underlined. I think I will convert it all to an image adn see how I fair, I am out of my dept, again! Thanks anyway.

08-19-2010, 02:34 PM
Of course you can use one image for the logo and slogan and use the alt attribute to write the slogan so that at least Google can crawl it for Google images.

But if you can avoid images with CSS than always go for that.

I did test my code snippet by the way and it works for me (no underline underneath the slogan).


I also used a background color on the a.slogan so that it looks like its one whole.

Here is the CSS:

08-19-2010, 02:58 PM
This is something worth considering from 'the boss'; http://www.domedia.org/oveklykken/css-image-replacement.php