A potpourri of: Highland Park; Jewish topics; Central New Jersey; art, Twitter, WordPress, health, web design, gardening …

Images Inside Links

In honor of Batya

Let's say you want to wrap a link around an image. You need to be able to spot image code. Look for the <img, the code that will start an image.

As an example, let's return to our garlic:
<img src="http://www.leoraw.com/images/pics/art/garlic_med.jpg" alt="garlic" >

You see the image begins with < and ends with >.

So now that you've discovered the image code, wrap it in an anchor tag. The start of the anchor tag will be this:
<a href="

After you type or copy and paste that piece, you then need to paste the url of the place were you want to go. Let's say you want to go to Batya's blog. So here's the next piece of code(make sure your URL starts with http://):
<a href="http://me-ander.blogspot.com/

Now you need to add a " and a >:
<a href="http://me-ander.blogspot.com/">

That's the whole left side of the link. The next part of the code should be the image tag itself, so your code thus far will look like this:
<a href="http://me-ander.blogspot.com/"><img src="http://www.leoraw.com/images/pics/art/garlic_med.jpg" alt="garlic" >

You are almost done. At the other side of the > you need to close the anchor tag with </a>.

Our whole code looks like this:
<a href="http://me-ander.blogspot.com/"><img src="http://www.leoraw.com/images/pics/art/garlic_med.jpg" alt="garlic" ></a>

The result:
garlic

Feel free to ask questions. I'll try to come up with answers that helps you understand.

 About image code
 How to do a link

22 Comments »

  1. batya says:

    Wow! I am going to try to do it to the kcc logo, but the code I have isn’t an img code. But I have an idea. If I go to photobucket and look at the choice of codes, maybe one will have an img. Will it?

    Stay tuned to me-ander.

  2. Leora says:

    Batya, why don’t you send me or post the code you do have? All images are presented with the tag. I can look at the code and dissect for you. If necessary, I’ll make it a new post.

    If you look at an image in photobucket and right-click on it (in Firefox), you should see “View Image”. Then you can get the url for that image. Does that help?

  3. Ilana-Davita says:

    Not that simple, is it?

  4. batya says:

    I don’t firefox. Right now I’m “playing.”

  5. Leora says:

    Ilana-Davita, to me, this is very simple. I look at code all day. It’s just like learning a new language; once you get the swing of it, you can do plenty.

    Just look for <a (start of links) and <img (start of images) in code, for starters.

  6. Leora says:

    Batya, playing is the best way to learn (as a teacher, I’m sure you know!)

  7. batya says:

    I sort of had it. Maybe I should wash the dishes, make lunch and then try again.
    I sent you the codes, but it’s not fun to link to something down, like blog carnival.

  8. Even I could do this. You explained it very clearly.

  9. frumhouse says:

    I’m going to have to look this through slowly when I am actually trying to do a post with images. Practical application works best for me when learning!

    Thanks for this post!

  10. Leora says:

    Mother in Israel, glad this helped.
    Frumhouse, feel free to ask questions when you are ready. If I’m not having one of my crazy days (too much work and family issues piling up all at once and making me crazed), I’ll be happy to answer. Batya has already done some experimental posts just “to play”.

  11. Ilana-Davita says:

    I’m like Frumhouse, I learn quickly when there is a need. Then I’ll come back to your “tutorial”.

  12. Baila says:

    [eyes glazing over]

    We need to find a way to get you here in Modiin so you can show us all this stuff first hand.

  13. Leora says:

    Baila,

    Now you are talking…how do I get my airfare all-expenses paid trip to Modiin? ;-)

  14. Gail says:

    Thanks so much for that explanation. I’ve always wanted to know how to do this. Going to bookmark this post and use it in the future.

  15. Michelle says:

    Thank you for both posts on html. You explained it well and used examples which made it easier to understand. It is another language though…

  16. batya says:

    ahh, bookmark
    That’s a good idea

  17. batya says:

    I Never Give Up!

    ps Who’s Shiloh Rosenberg?

  18. Ilana-Davita says:

    I’ve just tried and … suceeded. Thanks for this great tutorial. You might see it up today but I’m waiting for permission from a blogger to post an English version of her Finnish recipe.

  19. Marcos says:

    Big tip, Leora. It is much easier when someone teaches.

  20. Batya says:

    I’m going to try this technique on the next jpix. Either it will work or…

    ps why is your text falling so low, under your sidebar?

  21. Leora says:

    Batya, I tried to make this text look big. But perhaps it’s just working right in Firefox? It must be the browser that you are using. If I knew which browser, I might be able to fix it eventually, after lots of playing with the code …

    Ilana-Davita, glad you got this to work. That was the lovely egg salmon breakfast; it looked wonderful. And clicked easily!

    Marcos, I like teaching! Especially when my “students” come up with great posts as a result.

  22. Batya says:

    I posted coming attractions on both my blogs. Click the picture, and…

RSS feed for comments on this post. TrackBack URL

Please write something; I like to hear from you!