SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Hi Kevincamp. Welcome to SitePoint.

    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.

  3. #3
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hi Kevincamp. Welcome to SitePoint.



    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

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    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.)

    Code:
    <div class="header_flag"><img src="http://www.sitepoint.com/forums/images/de.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/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>

  5. #5
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.)

    Code:
    <div class="header_flag"><img src="http://www.sitepoint.com/forums/images/de.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/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

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    There are many ways to do this, but here's a simple example:

    Code:
    <!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.

  7. #7
    SitePoint Enthusiast Matt G.'s Avatar
    Join Date
    May 2011
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In order to put links on the flags you would do

    Code:
    <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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •