Image that Links

General web design discussion, including HTML, CSS, and JavaScript

Image that Links

Postby gsw28 » Fri Jan 04, 2013 3:04 pm

How do you create an image that will link to a webpage? I want it so that I have a pop-up window that allows me to upload an image then type in the link. Ive got the following code for the image but no way of creating the link.

<a cl_image="$myImage" cl_effects="maxsize=800,600,1">
<a href="#" magicedit me_name="image_Link">
<img src="" alt="My Image" width="487" height="408" border="0" magicedit me_name="myImage" /></a>

Posts: 8
Joined: Fri Dec 07, 2012 4:40 pm

Re: Image that Links

Postby raw10 » Fri Jan 04, 2013 4:30 pm

You'll have to edit the link and the image separately. In your sample code you also have two opening <a> tags and only one closing </a> tag. Not sure what's happening there.

Do you want to link to a larger version of the same image? You can do this like so:

Code: Select all
<a cl_image="$myImage">
  <img magicedit me_name="myImage" src="myimage.jpg" width="400" />

You can then use cl_effects to modify the linked version of the image if you wish.

If you want to combine an editable link with an editable image, you can do this but you'll get two edit buttons on the page that may overlap. Use an inspector like Firebug to see if you do have two edit buttons on top of each other. You can use CSS to modify how the buttons show up and make them clickable in this case.

Your code would look like this:

Code: Select all
<a magicedit me_name="imageLink" href="#">
  <img magicedit me_name="myImage" src="myimage.jpg" width="400" />

Again, you'll have two edit buttons on the page, but since it can't put a link inside a link MagicEdit will put the image edit button immediately outside the closing </a> tag. If you have a specific implementation we could look at, that might help to resolve the issue completely.
Posts: 81
Joined: Tue Apr 12, 2011 2:46 pm

Return to Web Design

Who is online

Users browsing this forum: No registered users and 1 guest