HTML - How To Add Alt Text To An Image Hyperlink

Hi All,

Possibly a double question here. On the main page of my website I plan to put an image (jpg or bmp) of the province divided into the three zones representing our organization. My intent is to set it up so that if your mouse goes over one of the zones, it will become hilighted and if you click it will link you to the website for that zone.

So the question becomes:

A) Do I need to create the image as 3 separate images or just one image? If 3 images how do I tell it to display correctly?

B) How do I do the rollover with link?

Hi i am new to HTML and have a really basic question. I am trying to teach myself HTML from scratch and came across adding a hyperlink to an image.

i found this HTML below on a practice web site and undestand that the
<a href="default.asp"> is where the hyperlink links to, but when i changed this to a website for example www.google.com it didn't go to the google page it just said error why is this?

Also the "smiley.gif" where does this come from if i wanted to change the picture that you click on how would i do this ??

I'd be so grateful if anybody could shed some light on this for me thank you,
Angela
<p>No border around the image, but still a link:
<a href="default.asp">
<img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32" />
</a></p>

I've never had this problem before but I uploaded a lot of images and put them in a gallery using an image hyperlink with thel image being a thumbnail and the link being the larger image. The problem is when I click the thumbnail the larger image has this white background around it. Is there anyway to fix this? or What am I doing wrong?

my code looks like this



<a href="http://www.eccentrix.com/members/carmellady/portfolio/DSC0006.jpg"
target="http://www.eccentrix.com/members/carmellady/IFRAMEURL2.html" border="0">
<img src="http://www.eccentrix.com/members/carmellady/Thumbnails/06TH.jpg" HEIGHT="20" WIDTH="20" border=0></a>

Hello everyone,

I have an image inside a div, when I try to make the image a clickable hyperlink the image disappears and there is nothing to click or see.


Code:

<div id="google"> 
<a href="http://www.google.com/">                       
<img src="google_icon.png" height="23" width="23" /> 
</a> 
</div>

I tried an alternative way by making the Div a hyperlink with the following code...

Code:

<div id="google"  class="hand" onclick="location.href='http://www.google.com';" target="_blank">  
<img src="google_icon.png" title="google" height="23" width="23" />  
</div>

This works except for a couple problems...1st when hovering over the link nothing is shown in the browser status bar and 2nd, the target="_blank" isn't working.

Here is a link to my site http://chasehearn.com/

On the left hand side there are 6 images (one is not showing) which i would like to make links.

I made the first (from the left) one work by making the Div that contains the image a link, but I can't get the link to open in a new window and I don't like how the browser (i'm using chrome) status bar doesn't show anything when hovering over the link.

The 2nd icon (which can't be seen) disappears whenever I add <a href></a> tags around it.

The images are in the correct folder.

Anyone have any ideas on what I'm doing wrong?

Thanks!

Hello.

I'm putting together my first website, and trying to learn HTML basics. One specific problem I'm having is getting an image hyperlink to refresh my web page, rather than opening a new browser tab/window. For example, the code I'm using is...

<a href="http://mywebsite.com" target="_blank"><img src="http://mywebsite.com/image.jpg" border="0" alt="My website"></a>

When a visiter clicks on the image, a new browser tab/window opens. I want the page to refresh, instead.

Can someone provide me with a solution?

Thank you.

here is the (ineffective) code currently:

<img style="float: left; width: 169px; height: 73px;" src="img/logo1.png" alt="" />
<h1 style="text-align: center;">random text</h1>

the image shifts the left margin such that the text is centered as though the page width was 169px less than it really is.

i'm not debating the code itself; the code above behaves as its meant to. aka no surprises. i just cant figure out the appropriate code to center the text across the entire real width of the page as though there was no image.

i've tried div tags & all the things google hunting advised. no luck. other than finding this forum, which seems like it'll be a boon!

thanx in advance for advise/comments/feedback/help.

I have seen this many times but can not figure how to do it. Its the transparent images or text in text boxes, one example of this is http://au.movies.yahoo.com/Coming+Soon/to-cinemas/ At the top right you can see that transparent yahoo image in the text box and when you click it it disappears then comes back? can someone tell me how this works?
Thanks

Im trying to create a simple thing for my business. What im trying to do is have the image of each of my employees and under it have their name and other info. I want the images side by side with some space and able to put their info under it. Can someone help me with a html code? thanks!

My client friend wants a links page with rollover emails that chage the main image of the page so he can have a different sketch of each of them.

My idea, and its backfiring as I can do this if I change the email text into images with swap image and a target but he wants them to remain as copyable (mmm is that even a word?) text.

Can it be done with text without making it an image?

many thanks to all you wonderful people that make these sites possible

jax

If anyone knows how to do this, please help...

I am trying to place text over an image. My image is broken up into 2 images. I want the text to be over the top image while retaining the two images being together.

Here is my html:


<td align="center" valign="top"><table width="500" border="0" cellspacing="0" cellpadding="0">
<img src="top.jpg"><img src="middle.jpg">

What would the html be to accomplish this?

Thank you

How do I type text on top of a image and have it look the same in IE and Firefox

Hi, I am new to the forum, and HTML. I have a website, but it built by someone else, who has since left the country, so I am trying to learn basic coding to do my own website work. My question is, how do I put an image on a page with text displayed on the image ? There is an image on the home page of my site, Lanna Charm, with text on it , and I have tried to create the same effect, without success. Is there an easy way to do this ? I found the image in "Assets", in the admin section, and I can reproduce it, but I want to use different images, with different text. Thank you, Mickmac

Hi,

I want to place some text over an image, however i don't want to set the image as a background, as the user should be able to print the image, along with the text.

What i want is that a photo would have something like "copyright 2009" or something similar when it is printed.

Can someone point me in the right direction (to the correct forum, link etc.)

thanks and best regards,

Joe

How can I, in a table, put text directly to the right of an image? When I try, the image is placed, and then there's plenty of space to the right, but the text goes to the bottom right corner of the picture. How can I have it like this: (x's represent the image)

xxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxx &larr; Text
xxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxx

I'd like to have them all on a center line so to speak, where the middle of the text is lined up with the middle of the picture, and the text is centered (the text will be in a column-like structure, not just one line as it appears above)

Heya,
Im coding a site here in Dreamweaver CS3 and need some help. I have a sliced image from my made-in-photoshop layout, that is my content area. But In dreamweaver I cannot add text over it.
Anyone have a tutorial or advice that can get me past this?

Quote:
<html>
<head>
<title>newv4</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="breakdownconspiracyinc.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (newv4.psd) -->
<div id="site_layout">
<table id="Table_01" align="center" width="500" height="470" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="4">
<img src="images/area/name_area.jpg" width="26" height="470" alt=""></td>
<td colspan="11">
<img src="images/area/logo_area.jpg" width="450" height="159" alt=""></td>
<td rowspan="4">
<img src="images/fill/right_fill.gif" align="middle" width="24" height="470" alt=""></td>
</tr>
<tr>
<td>
<img src="images/fill/graphics-fill.jpg" width="42" height="17" alt=""></td>
<td>
<a href="http://www.freewebs.com/breakdowninc/pages/Graphics.html">
<img src="images/buttons/button_graphics.jpg" border=0 width="73" height="17" alt=""></a></td>
<td>
<img src="images/fill/music_fill.jpg" width="31" height="17" alt=""></td>
<td>
<a href="http://www.freewebs.com/breakdowninc/pages/music.html">
<img src="images/buttons/button_music.jpg" border=0 width="45" height="17" alt=""></a></td>
<td>
<img src="images/fill/film_fill.jpg" width="33" height="17" alt=""></td>
<td>
<a href="http://www.freewebs.com/breakdowninc/pages/film.html">
<img src="images/buttons/button_film.jpg" border=0 width="30" height="17" alt=""></a></td>
<td>

<img src="images/fill/blog_fill.jpg" width="36" height="17" alt=""></td>
<td>
<a href="http://www.freewebs.com/breakdowninc/pages/blog.html">
<img src="images/buttons/button_blog.jpg" border=0 width="33" height="17" alt=""></a></td>
<td>
<img src="images/fill/about_fill.jpg" width="33" height="17" alt=""></td>
<td>
<a href="http://www.freewebs.com/breakdowninc/pages/blog.html">
<img src="images/buttons/button_about.jpg" border=0 width="50" height="17" alt=""></a></td>
<td>
<img src="images/fill/end_fill.jpg" width="44" height="17" alt=""></td>
</tr>
<tr>
<td colspan="11">
<img src="images/area/content_area.gif" width="450" height="270" alt=""></td>
</tr>
<tr>
<td colspan="11">
<img src="images/area/copywrite_area.jpg" width="450" height="24" alt=""></td>
</tr>
</table>
</div>
<!-- End ImageReady Slices -->
</body>
</html>
image: http://allyoucanupload.webshots.com/...57666093499606