Jump to content

Putting url links into a picture using PDN = image mapping? How do I do it?


Recommended Posts

Hi everyone. I'm new to Paint.NET, so please bear with me if I'm asking something really obvious, but I've been searching this forum (and the internet), and I can't find what I need. So I'm hoping someone more experienced can show me the way. Perhaps I'm using the wrong term?

 

I have an image I'm working on (a diagram of the life cycle of the Monarch butterfly, if you're interested) to put into my website/blog. I want to have it so readers can click on the pictures in each part of the diagram to be taken to the relevant page. Most of the pictures (my own photos) are contained in a circle or ellipse, so I would like that people could click anywhere in that ellipse and they're clicking the link to the relevant page. 

 

Someone told me this is called image mapping and that you can do it in Paint.NET. She referred me to a YouTube video by sabrownhundred, posted in 2009, in which Simon demonstrates (very quickly and silently!) how to do it. [http://www.youtube.com/watch?v=9hwxpYm4yg4] After viewing, pausing, and rewinding several times, I noticed he was using a plugin. Having recognised Simon's name from browsing this forum, I figured the plugin concerned must be one of his, so I downloaded and installed his plugin pack, but it turns out it was not one of those. So I have searched the plugin list and any mention of image mapping on this forum, but I can't find anything.

 

Could somebody please point me in the right direction? This is a common feature in websites, so I feel information about how to do it should be 'out there', and I'm feeling really frustrated to not be able to find it.

 

(I won't post my diagram yet unless someone who can help me really needs it, as I've (so far) been working in high resolution, then Save As... and shrink the image down to the size I need when I've finished - and I'm not quite done yet.)

 

Many thanks in advance.

Kathleen

Link to comment
Share on other sites

I don't believe you can do that in Paint.net.  I think it has to be done in the website builder.  The image can be made in Paint.net in full size and a thumbnail size but at the website the link would have to be stacked with the thumbnail image so that it links to the page the full size image is on. 

 

                                                              http://forums.getpaint.net/index.php?/topic/21233-skullbonz-art-gallery

Link to comment
Share on other sites

Technically, it can be done, but it is a rather time consuming process.  If this is really something you need, I would have to point to GIMP or the high priced Photoshop.  Sorry.

knightsig.png

Paint.NET Gallery | Remove Foreground Object Tutorial | Dispersion Effect Tutorial

”An artist should never be a prisoner of himself, prisoner of style, prisoner of reputation, prisoner of success.” ~ Henri Matisee

Link to comment
Share on other sites

I think you're looking for this plugin: Create Image Map.

 

Note that the plugin creates HTML code.  It does not embed the code 'into' the image.   You'll have to add the generated code into your web page source.

Link to comment
Share on other sites

Thanks everyone who replied.

 

EER, I think that's the one! I have downloaded it and installed it. As soon as I've finished my diagram, I'll try it. I kind of figured it creates the HTML code, but I'm not exactly sure what to do with it.

 

Is it beyond the scope of the forum for me to ask where I put the code once I have it? I'm using WordPress. The diagram will go onto a static page. Um... is HTML code compatible with CSS?

 

Thanks again. If I manage it, I'll post a link!

Link to comment
Share on other sites

OK, here's your HTML/CSS crash course:

On the web, HTML is the language that drives all content. Text, links, images, videos, etc. CSS is the language that drives all presentation: layout, color, font, etc. Both of them together are what makes up the modern web.

So are HTML and CSS compatible? More than that, they depend on one another. HTML without CSS is just plain text, while CSS without HTML... Well... Wouldn't really be anything.

WordPress is a program that uses the information you put into its database to generate HTML and CSS that it then sends to the user (It's written in a language called PHP, but that's not really important right now).

If you want to really learn about web development, allow me to recommend https://webmaker.org - it's a great way to get an overview or an in depth course for free.

  • Upvote 2

 

The Doctor: There was a goblin, or a trickster, or a warrior... A nameless, terrible thing, soaked in the blood of a billion galaxies. The most feared being in all the cosmos. And nothing could stop it, or hold it, or reason with it. One day it would just drop out of the sky and tear down your world.
Amy: But how did it end up in there?
The Doctor: You know fairy tales. A good wizard tricked it.
River Song: I hate good wizards in fairy tales; they always turn out to be him.

Link to comment
Share on other sites

Yep, HTML has grown a lot in 8 years.  When I was first learning it, there was no such thing as CSS.  :-)  Glad to help!

 

The Doctor: There was a goblin, or a trickster, or a warrior... A nameless, terrible thing, soaked in the blood of a billion galaxies. The most feared being in all the cosmos. And nothing could stop it, or hold it, or reason with it. One day it would just drop out of the sky and tear down your world.
Amy: But how did it end up in there?
The Doctor: You know fairy tales. A good wizard tricked it.
River Song: I hate good wizards in fairy tales; they always turn out to be him.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...