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

[QueenKathleen]

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

[skullbonz]

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. 

[TrevorOutlaw]

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.

[Ego Eram Reputo]

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.

[QueenKathleen]

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!

[david.atwell]

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.

[QueenKathleen]

Thanks for that, David! That really helped me get my head around it. I used to be quite techno-savvy, but after nearly 8 years home with the kids, the world has moved on and left me behind!

[david.atwell]

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!