Need some advice re: photoshop...

[Bec]

Hi Guys,

Long time no see hope everyone is well!!

I am a newbie to photoshop and have been playing around and am currently trying to link up a url in a main banner.... i know how to add the url via the splice tool but when it comes to saving i am at a loss... i have been trying for the last few hours and im doing something wrong cause i can either get the whole image linked up or nothing...

Would anyone please mind telling me if there is something specific I need to be doing?! It is probably something so basic as well but being first time... its a little frustrating after trying for so long!

Cheers!

[IchBin]

Hey Bec, good to see you again. So, you're trying to insert a banner into a page, and then link that banner? This isn't something you can do ALL in photoshop. Well, you probably can, but shouldn't is what I'd really say. lol It's easier to just create the image in photoshop, and then in your code just reference the image and link it. Or am I totally misunderstanding what you're asking?

Code Select Expand


<a href="http://yourlink.com/"><img src="path/to/image.jpg" alt="" /></a>

[Bec]

Thanks Ichbin! Have been off causing all kinds of trouble and just starting to get back into things!

Ok sorry I probably didn't explain it the best... i only want a small selection on the banner to be clickable... i have sort of managed to get what i need but where the splice is it has thrown the images out of whack (has split itself into 5 images) - combination of images and html (which has been converted to fbml) but hey at least the logo is now clickable lol

http://www.facebook.com/ArtsyTec.Web.Design?v=app_7146470109

[IchBin]

Ah yes, I see now. That makes more sense. I'm assuming you're ok now?

[Bec]

Getting there, except for the fact the splice has put everything out of whack... going back to PS to see if i can do a cheat and get around it. frustrating!!

[IchBin]

There's an easy way to do something like that in the code too. Generally if I slap a link over only a part of the image, I use CSS to do it.
You can then control the link by adding a width/height/padding etc to the element. For instance:

Code Select Expand


<div>
<a href="yourlink"><h3></h3></a>
<img src="yourimage.jpg" alt="" />
</div>

You then put the CSS attributes on the h3 tag to move your link over the image and position it where you need it. Mind you, this is just an example as this exact code won't work. Just trying to give you the idea.

[Bec]

oooh that could just be what i need! i am giving up for the night its 2am here and i need some sleep! will give it a whirl in the morning, thank you heaps for the advice I really appreciate it!!

[Lesmond]

You could use a Image map, I have found a few examples on google

I made one with this code

Code Select Expand

<CENTER>

<!-- BEGINNING OF IMAGE MAP -->

<IMG src="banner_468.png" useMap="#ImageMap" border=0>
<MAP name="ImageMap">
<AREA shape=RECT href="http://www.simplemachines.org/" alt="Simplemachines.org" target="" coords=102,39,432,55>
<AREA shape=RECT href="http://www.tinyportal.co.uk" alt="Tinyportal" target="" coords=95,5,432,40>
<AREA shape=RECT href="http://www.tinyportal.net/help" alt="TP Doc's" target="" coords=10,8,58,53>
</MAP>

<!-- END OF IMAGE MAP -->

</CENTER>

Demo can be seen here I placed this in a article, seems to work ok, run your mouse over the TP banner to see how it works, only thing I noticed the alt tags dont seem to work!

[G6Cad]

Les, all i get from that link is a blank middle section and only left right and top page are visible, the article doesent seem to be there or show anything 

[Lesmond]

Thanks G6 I had the article set to not be viewed by guests, fixed now