[HTML] Mapping ?

Printable View

13-08-09
ishan1996

[HTML] Mapping ?

Ugh, well I was looking at some tutorials at w3schools.com
and I'm trying to figure out what coordinates of the picture is so i can make part of the image clickable if you can help me, anywere here , msn, Pm, aim Please.

Heres code from w3schools im using I just need the coordinates

Code:

<html> <body> <map> <img src="pictures/portalcopy.png" width="1659" height="750" alt="Portal" useportal="#portal" /> <map name="Portal"> <area shape="rect" coords="0,0,0," href="index.php" alt="Home" /> <area shape="rect" coords="0,0,0" href="irc.php" alt="IRC" /> <area shape="rect" coords="0,0,0" href="forum.php" alt="Forums" /> </map> </body> </html>

also I'm trying to make sure its not scrolling so if you can check it out
because im on such a big screen
i made the position absolute.

http://70.92.171.33/unknown/portal.php
13-08-09
Parker

re: [HTML] Mapping ?

Never done mapping but when I use GD I open the image in fireworks (just to tell me the X/Y) in pixels, that's one way to do it.
Posted via Mobile Device
13-08-09
ishan1996

re: [HTML] Mapping ?

Well, I expanded the image so its not gonna work that way at least i dont think it would.
14-08-09
Parker

Quote:

Originally Posted by ishan1996

Well, I expanded the image so its not gonna work that way at least i dont think it would.

print screen it maybe? Then just try crop it as best as possible
Posted via Mobile Device
14-08-09
Superfun

re: [HTML] Mapping ?

Just a tip for your website, you should make that big large image into several images since it loads for a shittime.
14-08-09
BBim

re: [HTML] Mapping ?

Some time ago someone was starting on web desing and wanted some help, I posted this:

Quote:

If you really go into it, let me sugest some really usefull tools(at least they are for me):
Mozilla Firefox add-ons:

Quote:

Web Developer: https://addons.mozilla.org/en-US/firefox/addon/60
With it you can validade CSS, HTML(even if running at localhost), clear cookies, disable javascript, view page info like color's used, page size, and lots of other usefull things

MeasureIt: https://addons.mozilla.org/en-US/firefox/addon/539
With it you can check the size of things on the page very easy, you can check the size of a button or anything.

Colorzilla: https://addons.mozilla.org/en-US/firefox/addon/271
With that you can get color of things on the site, be it from a css or image, you can change red/green/blue of the color(double left click colorzilla icon at bottom left) to find a good color, without using paint or anything.
You can also get the "#rgb" or "rgb(r, g, b)" of the color by right clicking the icon.

Firebug: https://addons.mozilla.org/en-US/firefox/addon/1843
With that you can view page source code and live change it, you can check what CSS classes get for each tag, disable some property or add/change another and some other things.

Website:

Quote:

http://browsershots.org/
At that site you can get ScreenShots of your layout in different OS and browsers, before you start, be sure to have your site at a good hoster because they have a timout and if the site doesnt load in time, it will take the SS of a not fully loaded site, being useless for you

I wont explain how to use each tool, because it would be a lot big, but I added a little explanation of them.
I know you didnt ask for them but they will be really hand for you :P
Those things are inside quote just to separate better, I created the texts(didnt take them from the developers website), so it is not that complete.
Good luck on everything :)

In your case I think you can use MeasureIt to take the x/y of the image and browsershots so you can check if it scrolls.
15-08-09
s-p-n

re: [HTML] Mapping ?

Have you tried looking for a tutorial? Everything in HTML has a tutorial.

http://www.javascriptkit.com/howto/imagemap.shtml
16-08-09
ishan1996

re: [HTML] Mapping ?

Quote:

Originally Posted by Superfun

Just a tip for your website, you should make that big large image into several images since it loads for a shittime.

Yeah, I'm gonna do that a little later now im just worried about the coding, also I don't have anything to do / slice the graphics cause I don't have photoshop anymore (Ran out}

Quote:

Originally Posted by BBim

Some time ago someone was starting on web desing and wanted some help, I posted this:

In your case I think you can use MeasureIt to take the x/y of the image and browsershots so you can check if it scrolls.

I got it, thanks :) I just made a new DIV and made the width/height 100%

Quote:

Originally Posted by s-p-n

Have you tried looking for a tutorial? Everything in HTML has a tutorial.

http://www.javascriptkit.com/howto/imagemap.shtml

Well i have looked up a tutorial but i finally got it,
Thanks guys for the help :D
16-08-09
john_d

re: [HTML] Mapping ?

it won't do it that way.

anyway here is a TIP... don't act like all PRO and code a grafically intense website from notepad.

Use Dreamweaver for hotspots, Firewoks for Slicing. Everyone does it ... so should you.

btw: Loading an image is faster if you put them in CSS rather than an embed. since most browsers caches those css images. and use JPG not PNG
17-08-09
s-p-n

re: [HTML] Mapping ?

Quote:

Originally Posted by john_d

it won't do it that way.

anyway here is a TIP... don't act like all PRO and code a grafically intense website from notepad.

Use Dreamweaver for hotspots, Firewoks for Slicing. Everyone does it ... so should you.

btw: Loading an image is faster if you put them in CSS rather than an embed. since most browsers caches those css images. and use JPG not PNG

I'd have to disagree with the first two points.

a.) You should challenge yourself to code in Notepad++ instead of Dreamweaver. Dreamweaver is starting to get all old and dusty on my PC, I haven't a use for it anymore.

b.) Lot's of people actually code their own HTML. That's how you learn. There's not one thing I use Dreamweaver for anymore.

I used to use it as a CSS reference, it is a great CSS reference. Now I use google whenever I get stuck or forget anything. I used to use it for image maps; Well I haven't hand-coded one yet, haven't had a need to. If I wanted to, the last thing I would do is open Dreamweaver. With what I know about Divs, I'm sure I could figure out how to use that.

I figured out that by writing it all the time, I'm more efficient with my HTML & CSS.

The tutorial I put down was pretty good, you should read it. The guy could work on his grammar, but it's alright.
17-08-09
john_d

re: [HTML] Mapping ?

Quote:

Originally Posted by s-p-n

I'd have to disagree with the first two points.

a.) You should challenge yourself to code in Notepad++ instead of Dreamweaver. Dreamweaver is starting to get all old and dusty on my PC, I haven't a use for it anymore.

b.) Lot's of people actually code their own HTML. That's how you learn. There's not one thing I use Dreamweaver for anymore.

I used to use it as a CSS reference, it is a great CSS reference. Now I use google whenever I get stuck or forget anything. I used to use it for image maps; Well I haven't hand-coded one yet, haven't had a need to. If I wanted to, the last thing I would do is open Dreamweaver. With what I know about Divs, I'm sure I could figure out how to use that.

I figured out that by writing it all the time, I'm more efficient with my HTML & CSS.

The tutorial I put down was pretty good, you should read it. The guy could work on his grammar, but it's alright.

I haven't used Dreamweaver in all of my projects.. i'm just stating that it is a good place to start specially if your starting.

Just stating that if your need to create a IMAGE MAP, no point guessing and just open up dreamweaver and load up ur html file.
17-08-09
s-p-n

Re: [HTML] Mapping ?

Hey, I agree with that! ;)