JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

How To Add A Link To An Image

How To Add A Link To An Image:

There are several ways to accomplish adding a link/hyperlink to an image. I'm going to give instructions for Network Creators who don't use WebDav to upload files. If you use WebDav, you know how to do this. ;-)

1. If you have a link to your image on Photobucket, or another image server, be sure you know the full path and link. Skip to #5. If you do not have your image on another image server, and need upload, see #2.
2. Add A Blog Post/Comment (from any Blog on your Ning Network)
3. Insert your image by clicking on the camera icon.
4. Click on Browse to locate image file on your computer.
5. Click on Add.
6. After the image has been uploaded, and the link for the image has been inserted into the Blog Post, we want to extract a portion of the code. Remove the paragraph tag from start and end of statement. All you need to keep, is: <img src=... thru the ending > for img src code.
7. Now, let's add our link.
8. First, we will prepare the link, and then add our image code to the link.
9. Write your link code: <a target="_blank" href="http://www.link_accessed_when_image_is_clicked.com">YOUR CLEANED-UP IMAGE CODE/LINK FROM ABOVE, GOES HERE.</a>
Note: _blank will open a new Browser window/tab
10. Copy/Paste your cleaned-up image code from above #6, to the link code from #9 - - where it says: YOUR CLEANED-UP IMAGE CODE...GOES HERE.

Illustration and Summary of Steps:
Basically, you want a member to be able to click on an image, and go to a web page/link. In order to do this:
1. You need the link to your image. Or, upload "on the spot" using the camera icon.
1b. If you upload "on the spot", be sure to remove the paragraph tag from the inserted image code - see illustration, below. It will start with <p...> and end in </p> - - delete all of the paragraph code, only leaving the code for your image source.
2. Add your hyperlink tag (link you want a click to GO TO) "around" your image code.
3. See illustration below.

0 members favorited this

Replies to This Discussion

Permalink Reply by JenSocial on April 27, 2009 at 9:16pm

Does it make sense? I hope so.
:-)

The Kingdomz X said:

Faaaantastic!

Permalink Reply by Magic Happens on April 28, 2009 at 9:57pm

It will make a lot of sense to most people, l need to think on this and think on this to let it soak in.

Permalink Reply by JenSocial on April 29, 2009 at 2:03pm

Basically, you want a member to be able to click on an image, and go to a web page/link. In order to do this: 1. You need the link to your image. Or, upload "on the spot" using the camera icon. 1b. If you upload "on the spot", be sure to remove the paragraph tag from the inserted image code - see illustration, below. It will start with <p...> and end in </p> - - delete all of the paragraph code, only leaving the code for your image source. 2. Add your hyperlink tag (link you want a click to GO TO) "around" your image code. 3. See illustration below.

Fantasyland said:...

Permalink Reply by Online Shopping Mall on July 1, 2009 at 8:27am

Is this the code we would use to put in a scrolling image for our ning members, for example? and then place it in the scrolling marquee as you mentioned in the scrolling marquee tip?
Ning Directory said:

Basically, you want a member to be able to click on an image, and go to a web page/link. In order to do this:

1. You need the link to your image. Or, upload "on the spot" using the camera icon.
1b. If you upload "on the spot", be sure to remove the paragraph tag from the inserted image code - see illustration, below. It will start with <p...> and end in </p> - - delete all of the paragraph code, only leaving the code for your image source.
2. Add your hyperlink tag (link you want a click to GO TO) "around" your image code.
3. See illustration below.

Fantasyland said:...

Permalink Reply by Online Shopping Mall on July 1, 2009 at 9:07am

Ok i added the scroll marquee code but some of the code is scrolling along with the pictures--help me.

Permalink Reply by JenSocial on July 1, 2009 at 11:08am

Answer to your first question:
This is the code you use to add any link to any image. It's like when you click on an image on a web page, and it takes you to another web page. Or. like our scrolling images on this site, and scrolling really has little to do with what this topic is showing "how to do". I hope that makes sense. Probably a better example is when someone clicks on a member icon on any Ning site, it takes you to their profile page - - that's a good example of an image with a link/hyperlink.

On this comment "Help"...I'll have to see your code to help. You can email it to ningdirectory on yahoo (leaving out the @ due to spambots). I will look at the code for you, when I have time. Here's a tip: go through the code with a microscope (very carefully). Make sure that every single beginning tag has an ending tag, every period, quote, every <> are correct, balanced and exist. Writing HTML is similar to writing formulas. Both sides must balance.
Best,
Jen

Online Shopping Mall said: