Jump to content
Sign in to follow this  
Chocolate Kitty

How to create a similar webpage.

Recommended Posts

Essentially, what I'm trying to figure out is how to create a webpage similar to

http://www.fireemblemwod.net/fe6/guiafe6/ENG_cap7.htm

^ that. Just the map part though, the whole uploading of an image and attaching a tag to specific parts of it.

I know this is a terribly worded question/post, I apologize.

Share this post


Link to post
Share on other sites

I haven't checked what their code is like, but what I would do is have an image (the chapter map) and then define rectangle areas (using co-ordinates) and give them mouse rollover elements.

I think the last one is the only hard part, if you want to show lots of data for one square.

Share this post


Link to post
Share on other sites

If you're good with HTML, just Notepad (or any good text editor) would be fine.

But in any case, I'm not aware of any programs that work with code of this level (although mainly because I haven't looked for any).

Share this post


Link to post
Share on other sites

If you're good with HTML, just Notepad (or any good text editor) would be fine.

But in any case, I'm not aware of any programs that work with code of this level (although mainly because I haven't looked for any).

You likely haven't looked cause WYSIWYG editors suck.

Anyways, looking at the source code of that website, it's bad. College-trained web design hatred aside, what Vincent said is correct. The person who did that site made an image map with mouseover events, starting with the declaration of the image at line 14:

<td width="336"><img src="../mapasfe6/07.png" width="336" height="448" border="0" align="right" usemap="#Map" class="cursor"></td>

As a note, please never use tables (table, tr, td) for layout like this guy. That is seriously 1990's web design.

The map itself starts on line 130, and spans to line 169:

<map name="Map">
  <area shape="rect" coords="272,351,289,367" onmouseover="Tip('Lv.7 | HP: 28, VA: 2<br>Po: 17, Hit: 69, Crit: 3<br>Eva: 8, Def: 12, Res: 0<br>- Javelin / Jabalina')" onmouseout="UnTip()">
  <area shape="rect" coords="272,256,289,272" onmouseover="Tip('Lv.7 | HP: 28, VA: 2<br>Po: 17, Hit: 69, Crit: 3<br>Eva: 8, Def: 12, Res: 0<br>- Javelin / Jabalina')" onmouseout="UnTip()">
  <!--Items omitted for brevity-->
  <area shape="rect" coords="49,1,66,17" onmouseover="Tip('Lv.7 | HP: 19 (23), VA: 4 (6)<br>Po: 13 (15), Hit: 83 (90), Crit: 2 (3)<br>Eva: 13 (17), Def: 3, Res: 5 (7)<br>- Elfire')" onmouseout="UnTip()">
  <area shape="rect" coords="112,1,129,17" onmouseover="Tip('Lv.7 | HP: 19 (23), VA: 5 (8)<br>Po: 10 (14), Hit: 88 (93), Crit: 7 (8)<br>Eva: 11 (19), Def: 3, Res: 5 (9)<br>- Thunder / Trueno')" onmouseout="UnTip()">
</map>

These lines define rectangle shapes based on the coords given in the coords attribute, in the x1,y1,x2,y2 pattern for the location of the first corner and opposite corner of the rectangle. It sets the onmouseover and onmouse out to two javascript functions.

The JS functions seem to be in some generic tool-tip library. It seems to be this library, but it hasn't been maintained since 2008, so I wouldn't recommend it for the sake of poor maintenance.

I'll write up a quick thing of what I would do for the situation. For simple tooltips, there's built-in HTML stuff for it, for more advanced stuff, a modern JS Script, like JQueryUI would be best.

Edit: Oh gods, I'm too lazy. Here's a plugin you can use. If you need help figuring it out, pm or email me or eat cheese: http://craigsworks.com/projects/qtip2/demos/#imagemap

Edited by Tarkenfire

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...