Web Design: Need Help In Splitting Up Pictures Having trouble splitting up my picture

[RomfordReject1 0]

Hi all,Heres the problem.I have my design for my website (including a splash page posted in the forum) that i have made in gimp. I want to split the image up into several pieces, and then reform it on the website so i can use them as links, seperate the title and add gaps etc. But dont know how to, i know that it involves using some sort of frame system!( from looking at templates).If any of you know a method of doing this or have a website that could help please reply!

Edited November 4, 2005 by microscopic^earthling (see edit history)

[iGuest 3]

Have you considered trying to use Dreamweaver? I know its a big investment but they also have free trials online. Dreaweaver has a lasso tool that allows you to select different regions on an image and link each of them to different places. If you need more infp about it then PM me but i think this is one way to solve your problem. AND for free website templates try searching google.

[Houdini 0]

Here are some links that might help you out a little bit, what you want is image mapping and the links below will hopefully be of assistance.

 

http://www.echoecho.com/htmllinks07.htm

http://forums.xisto.com/no_longer_exists/

http://forums.xisto.com/no_longer_exists/

http://forums.xisto.com/no_longer_exists/

http://www.w3.org/Daemon/User/CGI/HTImageDoc.html

 

Tools;

 

http://www.ihip.com/tools.html

http://forums.xisto.com/no_longer_exists/

 

Good Luck with your project!

[Reaver 0]

Also if you are going as far as getting dreamweaver romford or you already have it the all you need to do to make this even easier is use a "hotspot" it is a shape ( usually a rectagle ) that u can create on any image in dreamweaver and resize it to any size( for you the size of the button) and place it anywhere on the image itself (for u on the button). The tool button for hotspot can be found in the properties area on the bottom left hand side if im not mistaken. If in doubt use the dreamweaver help F1.The hotspot can then be hyperlinked and wen sum1 moves a mouse over the image it will only become a link if the mouse pointer is ver the spot where the hotspot is (which is invisible ofcourse) ;)Good Luck

[ruben1405241511 0]

Adobe GoLive and Photoshop have this functionality too, just for fairness and because I use them :-)But you were talking about splitting up the picture (also a solution if it is just a rectangle). You can do that with a lot of graphic applications. Just save the original picture, crop(PhotoShop function name)/chop it into parts and put it into a table (or layers or text lines). That will do the job. Then you just link the certain part.I disagree with Reaver saying that it would be usually a rectangle I disagree. The great thing about imagemaps is that you can define any shape (really tedious without a wysiwig).You might consider using onfocus="this.blur()"because it looks a litte bit stupid when a part of an image is highlighted (but you rob the user of his function to use tab for links this way).

[twitch 0]

GoLive adds too many unknown tags, ones that are created by Photoshop slicing.There is a program (well addon) for Photoshop, that allows you to make your image, add the slices and it will export it all into a website for you. I can't remember the name of it at the moment, but I will find out for you.

[RomfordReject1 0]

Thanks All but there is some problems with what you are saying!1.No im not in the finacial posistion to buy dreamweaver and not photoshop either(gimp is what im using)!2.The Image Map - On my other topic about my splash page i was told to use a image map! I went to do it but was getting varios problems and suddenly thought back to when i had a template. Its has one image split up then reformed in table and looks all to gether but has all seperate links etc.Keep posting, You have all been helpful but just not for what im looking for thanks

[organicbmx 0]

if you dont want to imagemap you will have to try splicing the image, really in your situation it sound as if this is not the best idea. there is no need when an imagemap would do better.

i guess you looked in gimp for imagemaps but found none. you need a plugin of some sort. one that wil probably work is here.

the plugin

if not google 'gimp imagemap'

also html imagemap reference here:

html image reference

if you still want to splice, really dont - you will have a nightmare trying to position the images properly. im currently struggling in css to perfectly and precisionly position some difficult images. its much harder than using a gui thing to make an imagemap.

hope that helps

[yungblood 0]

Hi all,

 

Heres the problem.

 

I have my design for my website (including a splash page posted in the forum) that i have made in gimp. I want to split the image up into several pieces, and then reform it on the website so i can use them as links, seperate the title and add gaps etc. But dont know how to, i know that it involves using some sort of frame system!( from looking at templates).

 

If any of you know a method of doing this or have a website that could help please reply!

1064328525[/snapback]

Take a look at my site http://www.yungblood.com/ and see what you think of my menu. The easiest way, is just cut the image into pieces. The way I did it, for the basic stuff, was to have a master copy of my main image. Then each time I wanted to cut a piece off, I would copy the master file to a new file, then crop it to just the part I wanted. Another way, is use cut to remove each piece of the image, and paste into a new file. The advantage of this method, is that you make sure that you end up with all the pieces matching up. You would see if you missed anything in the file you cut from. Then you can use a table to put the images back together. It may take some serious tweaking to get the table just right, but it can be done.

 

-YungBlood

[ruben1405241511 0]

I don't know what picture you want to put that button on, but slicing a picture is not that difficult if it is not a difficult shape. If it is, like on your splash page, a rectangular button, then you can slice the part above, put it in a table with neither border nor padding, then you can slice the part above and put it into the same table at the bottom. then you slice of the right and the left part and there you go! all you need is a table with fixed widths 3 columns, 3 rows... doesn't sound that difficult to me. You should consider this if it proves difficult for you to design an imagemap.If you decide to slice and position in CSS: Create a Layer with the width of the whole image and then position the parts inside, this will make it as easy as in a table.Now that you have gotten that many parts, it might be time to "reveal the picture" ;)I have GoLive and I can slice/map it for you, if you tell me what to map. It goes really fast. I can also remove the strange tags, guy talked about, I don't know about them, but it is some time ago, that I did it. But I would make it valid.

[chocolatxbliss 0]

use an image map lol i just gave out the link to someone else i think it's

http://www.lissaexplains.com/ and then search for "image map" and click the first one, it gives you a tutorial. you don't have to like split the image up or anything (unless you want to)

if you want to like split it up and link separate images...then you can just use this really easy code

<a href=""><img src=""</a href>

it's not that hard and you can like put gaps and stuff though i think an image map would be easier...i dunno i'm not realy sure what you're asking but i think that's it.