Splash Screen

[muffins]

How can I make it so when people click on a certain part of my splash image that it takes them to a website?

[Tommy_S]

make a URL, like: www.yoursite.com\main.htm, _self

[muffins]

I am a bit of a newbie when it comes to web design. Where do I put that? Like I have a picture of a moon and there is a little square on the moon. I'm wondering how I can get it so when they click on the little square it takes them to a site. Do I put that code somewhere in photoshop?

[REEF·]

<a href="websitePath"><img src="imagePath" width="w" height="h" border="0"></a>

You need to set up an HTML page if you are using HTML for a splash screen. That code goes on after the body tags.

[muffins]

Well that works so if you click ANYWHERE on the image, but I want to set it so when they click on certain parts of the image it takes them somewhere.

www.cttv.us has the splash page. I want it so if they click on any of the bases it takes them to a page.

[REEF·]

Well you'll need to slice the images in Photoshop, starting from the top of the moon, in order to separate the bases and use HTML to bring it together.

[nobody]

No you can use a hit area. Do a google search and you'll find something. There's no need to slice the image, though that's sometimes more practicle :)

[REEF·]

whatever flows your boat

[Vexir]

Haha reef thats a really slow way,(and isn't it "whatever FLOATS your boat? ;) ) actually what is best is to use an IMAGE MAP.. its an HTML thing, really simple to use actually.. (client side)

syntax:


<map name="test">
<area shape="rect" coords="x1, y1, x2, y2 href="www.kirupa.com">
<area shape="circle" coords="x, y, r" href="www.vexiron.com">
<area shape="poly" coords="x1, y1, x2, y2, y3 href="www.kirupaforum.com">
</map>

<img src="banner.gif" USEMAP="#test">

That should do it... quick code explanation, the shape can be either a circle, rectangle, or polygon, and the coords for a rectangle are obvious, x1, y1, x2, and y2 represent the upperleft and lower right hand corners of the rectangle in pixels... For a circle, x and y represent the coords of the center of the circle, and r represents the radius. For a polygon, you just give the coordinates of each point in the polygon.

Surprising how many people don't use these and complicate things with tables. :thumb:

[REEF·]

you know what? i'm not a big code buff here alright cut me some slack hahaha :P

[Jeff Wheeler]

You could also use a css recreation of Image Maps, like this one:
http://www.frankmanno.com/ideas/css-imagemap/

[hl]

You could also use a css recreation of Image Maps, like this one:
http://www.frankmanno.com/ideas/css-imagemap/
css obsessor :P

the image map always has worked for me :)

edit:/ vexir your code is a bit screwed..



<map name="test"> <area shape="rect" coords="x1, y1, x2, y2" href="www.kirupa.com"> <area shape="circle" coords="x, y, r" href="www.vexiron.com"> <area shape="poly" coords="x1, y1, x2, y2, y3" href="www.kirupaforum.com"> </map> <img src="banner.gif" USEMAP="#test">

[Jeff Wheeler]

Try using that in Lynx ;)

[GW02]

You could also use a css recreation of Image Maps, like this one:
http://www.frankmanno.com/ideas/css-imagemap/

CSS obsessor! :P

/me quietly ignores the fact that he is a CSS obsessor too...

[Jeff Wheeler]

Fine! I love Accessibility! But that gives me an advantage ;P

[Vexir]

@ .Harish: Why is my code screwed?

[jay-em]

Did you all read the whole "newbie" part???
Dude, use image ready... make the freaking box a hyperlink and rock on....
Need instructions?

[Vamp9190]

What HTML editor are you using for your page?

In Dreamweaver, insert the Moon Image on your HTML page and then click it,
at the bottom of your screen a 'properties' tab appears - use the hotspot square to draw a hospot over your area.

http://img217.imageshack.us/img217/9227/dwhotspot013xu.jpg


Then simply type a URL in the Link field. Done.


http://img169.imageshack.us/img169/1829/dwhotspot023sm.jpg

[Vexir]

Just because he's new to web design doesn't mean he has to turn retarded and use what you see is what you sh!t editors. HTML is not hard, in fact, for the newbie, its the best thing to learn!

It's just a simple matter of finding out the coordinates of the points you need, which can be done in any image program! (In Photoshop just move your cursor over the point and look in the Info palette.)

Guy, just open notepad up, and hand code the site in good old HTML. The code that I gave you will work just fine.

[Jeff Wheeler]

Also, learn xhtml, not html ;)

[jay-em]

:sigh: --

PM me if you need any help aside from notepad dude.