Chocolate Kitty Posted May 25, 2013 Share Posted May 25, 2013 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. Quote Link to comment Share on other sites More sharing options...
VincentASM Posted May 25, 2013 Share Posted May 25, 2013 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. Quote Link to comment Share on other sites More sharing options...
Chocolate Kitty Posted May 25, 2013 Author Share Posted May 25, 2013 Do you know of a specific program to do this, or would it just be raw coding or something? Quote Link to comment Share on other sites More sharing options...
VincentASM Posted May 26, 2013 Share Posted May 26, 2013 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). Quote Link to comment Share on other sites More sharing options...
Tarkenfire Posted May 28, 2013 Share Posted May 28, 2013 (edited) 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 May 28, 2013 by Tarkenfire Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.