How to put hyperlink in any image?

Hi,
I have a site and in the header area there are 3 flags.
All I have to do is just put links on the flags but when I go to change and put any link, my header area becomes here and there.
Is there any solution to fix this problem.

your help would be appreciable.

Thanks

Hi Kevincamp. Welcome to SitePoint. :slight_smile:

Is there any solution to fix this problem.

Yes there is indeed, but we need to see your code, or the page in question, to advise further. If you post code, post the images too (or something equivalent), so we can test with those.

Hi,
Here is the code:

<div class=“header_flag”><img src=“images/de.gif” alt=“” /> </div>
<div class=“header_phone1”> (000) 000 0000 </div>
</div>
<div class=“numbers_inner”>
<div class=“header_flag”><img src=“images/es.gif” alt=“” /> </div>
<div class=“header_phone1”> 000 000 0000 </div>
</div>
<div class=“numbers_inner”>
<div class=“header_flag”><img src=“images/fr.gif” alt=“” /> </div>
<div class=“header_phone”>(000) 000 0000 </div>
</div>

Thanks

We really need the CSS too. On its own, wrapping <a> links around those images won’t do anything.

There’s a bit more code in there than you need. That marked in red is out of place, unless there’s meant to be another numbers_inner above it. (It does look like there are too many divs here, though.)

<div class="header_flag"><img src="http://www.sitepoint.com/forums/images/de.gif" alt="" /></div>
<div class="header_phone1"> (000) 000 0000 </div>
[COLOR="Red"]</div>[/COLOR]
<div class="numbers_inner">
<div class="header_flag"><img src="http://www.sitepoint.com/forums/images/es.gif" alt="" /> </div>
<div class="header_phone1"> 000 000 0000 </div>
</div>
<div class="numbers_inner">
<div class="header_flag"><img src="http://www.sitepoint.com/forums/images/fr.gif" alt="" /> </div>
<div class="header_phone">(000) 000 0000 </div>
</div> 


can you please help me to know what more code i will have to add to work links on the flags?

thanks

There are many ways to do this, but here’s a simple example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flags</title>
	
<style type="text/css" media="all">
* {margin: 0; padding: 0;}
img {border: none;}
.header {width: 600px; margin: 0 auto; overflow: hidden; background: #e7e7e7;}
.header p {width: 180px; text-align: center; float: left;}
.header p+p {margin-left: 30px;}
.header p img {display: block; margin-bottom: 5px;}
</style>
</head>

<body>
<div class="header">
  <p><a href="http://www.google.com"><img src="http://pageaffairs.com/sp/i/flag.gif" alt="XX country flag"></a>(000) 000 0000</p>
  <p><a href="http://www.google.com"><img src="http://pageaffairs.com/sp/i/flag.gif" alt="XX country flag"></a>(000) 000 0000</p>
  <p><a href="http://www.google.com"><img src="http://pageaffairs.com/sp/i/flag.gif" alt="XX country flag"></a>(000) 000 0000</p>
</div>

</body>
</html>

Copy that code, paste into a .html file, and open in a browser.

In order to put links on the flags you would do


<div class="header_flag"><a href="your website url here"><img src="http://www.sitepoint.com/forums/images/de.gif" alt="" /></a></div>
<div class="header_phone1"> (000) 000 0000 </div>
</div>
<div class="numbers_inner">
<div class="header_flag"><a href="your website url here"><img src="http://www.sitepoint.com/forums/images/es.gif" alt="" /></a> </div>
<div class="header_phone1"> 000 000 0000 </div>
</div>
<div class="numbers_inner">
<div class="header_flag"><a href="your website url here"><img src="http://www.sitepoint.com/forums/images/fr.gif" alt="" /></a> </div>
<div class="header_phone">(000) 000 0000 </div>
</div>

Hope this helps