I wanted to try a different layout but my lack of in-depth html knowledge prevents me from moving forward....I didn't know where else to post this, but I needed help so...

this is the image:

http://img115.echo.cx/img115/3231/sonata3ga.png

I wanted to do frames but I wanted also to make the links be from the image.......

Meaning, you see the flowers? Where the petals come out of, the circular things >_>;; They're magenta, cyan, and green. Um...these things: http://img241.echo.cx/img241/6057/yellow9ru.gif. Well, I wanted to make links out of those circular things and have them point into a frame (which is what the empty space out to the right would be...)

Can anyone tell/teach me how you can do that? I know you have to do absolute positioning or whatever it's called, and I've already got them cut out as gifs, but now I need to actually know how to link them. I don't have any html set up as of now, I just kinda wanted to know how you would start off?

I thank you guys in advance, if you're able to help me =/

 

 

 

Reply

What I would do is first cut down the picture to just that group of flowers and then put that in a frame to the side. I haven't used frames in a long time, but you should be able to get code for them really easily on Google.

Next, you'd need a map to designate the parts as links:
Replace the stuff with what you need. Make sure the map id is preceded by a #. You can add more areas and there are different shapes, but for the center of the flowers, those are all circles. For the coordinates, the origin (0,0) is at the top left of the image. R is the radius of the circle.

For more map stuff, go to http://www.w3schools.com/tags/tag_map.asp

 

 

 

Reply

To accomplish your first goal of making a part of the flower into a link, you have three options:

Option one (and this is the option I would choose), you could create what is called an "image map" by inserting a little bit of html into your page.



In the above code, "130" is the x-position (horizontal) of the center of the circle (in pixels), and "114" is the y-position (vertical). "29" refers to the width of the radius.

If you have Dreamweaver, Fireworks, Imageready, or a comparable html/image editing program, the program will do most of the work for you.

For more another page on image maps, see this page.

Option two depends on the use of slices. Imageready and Fireworks will cut your image into rectangular slices. They are saved as individual images which are put together as one image. All you have to do is give the link slice a URL and then take the code provided by the image-editing program.

Often, designers prefer to cut up their images to make them load faster.

Option three is probably what you are inquiring about. You could position the yellow circle image on top of the larger image and make the small image into a link. There are a lot of ways this can go wrong, so I'd recommend you go with my first method, but here's how you could do it. Since you know about absolute positioning, I would assume you know how to place the small image right where you want it on top of the large image. To add a link, the code would look something like this:

<a href="iframecontent.html" target="iframename"><img src="flower.jpg" style="position: absolute; left: 235px; top: 78"></a>

Now this only leaves the matter of putting up an iframe. If you need any assistance with that, just reply. Good luck.

Reply

Or check out this page for a totally CSS-based solution.

Reply

Oh wow, thanks guys.

I have another question....is there a way to make the 'circle' different on hover? Like, I cut it out and made it 'brighter' so that when you hover over the circles, they'll light up.

>_> How would you do that?

Reply

In your source code, between the < style > and < /style > tags, define the division style.

For example, the division ID is going to be called "circles"

This is what it should look like:



OK some explanation in order: The output you'll get is just the circle shape with the words "the circle" in the circle shape.

If you need to look at an example you can take a look at my blog. The colour of the circles in the top menu changes when you hover your mouse over it - I assume that's the effect you're talking about.

It was done in PHP but that's too complicated to explain here and anyway I only used PHP because that's what my blog engine runs on. You'll get the same effect just fine if you use CSS and HTML.

Hope that answered your question.

Any other questions I'll be happy to help.

Reply

Milk,

tatatee has written an excellent tutorial of editing image map effortlessly on this tutorial. I hope that helps you out in any ways. By the way, I've secretly always wanted to know how to do this, too

Reply