dcsimg
www.webdeveloper.com
Results 1 to 6 of 6

Thread: converting images and hyperlinks

  1. #1
    Join Date
    Jul 2014
    Posts
    1

    converting images and hyperlinks

    Hi, I am struggling with converting hyperlinks into HTML that are located on top of the image (being a hyperlink in itself too). How can I solve this? Thanks in advance.

  2. #2
    Join Date
    Jul 2014
    Posts
    9
    <a href="link address"><img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
    <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption></a>

  3. #3
    Join Date
    Jul 2014
    Posts
    9
    Sorry This puts it on top and uses the figure element

    <figure>
    <a href="link address">
    <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
    <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
    </a>
    </figure>
    Last edited by jedaisoul; 07-31-2014 at 01:37 PM. Reason: duplicate closing tag deleted

  4. #4
    Join Date
    Mar 2012
    Posts
    1,814
    I think that the OP wanted something different from that. By my reading of it, the figure is intended to be a link separate from the image, i.e. two links not one. Is that correct? If so, I'm not sure that is possible, nor why you would want to do it anyway???

    Also it won't work on IE8, so there is a legacy problem.

  5. #5
    Join Date
    Jul 2014
    Posts
    9
    It was the best I could do

  6. #6
    Join Date
    Oct 2013
    Posts
    598
    I'm no CSS positioning expert but perhaps this is what the OP wanted?
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <style>
    #container {
    	position:relative;
    	top:200px;
    	left:200px;
    }
    #myimage {
    	position:absolute;
    	z-index:1;
    }
    #textlink {
    	position:absolute;
    	margin:110px 120px;
    	z-index:2;
    }
    </style>
     
    <title>Untitled Document</title>
    </head>
    
    <body>
    
    <div id="container">
    <span id="textlink"><a href="mytextlink.htm">Text link</a></span>
    <a href="imagelink.htm"><img src="myimage.jpg" width="304" height="228" alt="my image" id="myimage"></a>
    </div>
    
    </body>
    </html>
    Feel free to rip me a new one on the code. However, it does work in IE8.
    Although jedaisoul asks a legitimate question: "Why?" I can see issues with user confusion here.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles