Complete novice - Is this possible?

Elldee · 01-10-2013, 01:38 PM

Hey all,

I've been interested in getting involved in Html & CSS coding for awhile now and I have finally have time to get stuck into it and learn the basics.

I play a game in which an image map is used. I was wondering if it is possible to find images within this map?

To contextualise the game I play has a field of view that you are free to move on. Within this field chests, trees, rocks etc all spawn.

Is it possible to use the overview map (An image map you can click on that shows your current position on the map as whole) to find these specific images?

So using the overview map to find specific images?

I've no idea where to start or if this is even possible, any help would be appreciated and sorry for the complete lack of clarity.

If more information is required (Im sure it will be) please let me know.

L0adOpt1c · 01-10-2013, 01:44 PM

So to clarify, the game is made in HTML?

Elldee · 01-10-2013, 01:51 PM

Yes, I believe so.

I used chrome to inspect the element and here is the source:

<table width="600px"><tbody><tr><td align="center" colspan="2"></td></tr><tr><td align="left"> <font size="2" color="green" colspan="2">Area Difficulty: Easy</font></td><td align="right"><b>Vandora_41</b></td></tr></tbody></table><table style="border:solid 1px #000099;" width="650px" height="650px" background="images/square3.gif"><tbody><tr><td><a href="index.php?do=killmob:2c4c1315e04cfb8941a18271f1ed064f"><img border="0" src="images/mboss2.gif" title="Click Me!" style="margin-left:340px; margin-top:40px; position:absolute;"></a><a href="index.php?do=onlinechar:1095:1"><img border="0" src="images/player.gif" title=" Irpwnzorz - Lvl 130" style="margin-left:300px; margin-top:275px; position:absolute;"></a><img border="0" src="scenery/FlowerFoliage001.png" title="Something is growing here" style="margin-left:190px; margin-top:40px; position:absolute;"><img border="0" src="scenery/FlowerFoliage001.png" title="Something is growing here" style="margin-left:190px; margin-top:415px; position:absolute;"><img border="0" src="scenery/tree1.png" title="Something is growing here" style="margin-left:490px; margin-top:490px; position:absolute;"><a href="index.php?do=onlinechar:1095:1"><img border="0" src="images/playerbak.gif" title=" Irpwnzorz - Lvl 130" style="margin-left:300px; margin-top:275px; position:absolute;"></a><a href="index.php?do=killmob:2c4c1315e04cfb8941a18271f1ed064f"><img border="0" src="images/mboss2bak.gif" title="Click Me!" style="margin-left:340px; margin-top:40px; position:absolute;"></a></td></tr></tbody></table></td>
<td align="center" class="right"><table width="100%">
<tbody><tr><td align="center">
<table style="border:solid 1px #000099;" width="178px" height="178px" background="images/minimap1.gif"><tbody><tr><td><img src="images/map_black.gif" title="Shinmen" style="margin-left:117px; margin-top:85px; position:absolute;"><img src="images/map_yellow.gif" title="Irpwnzorz - Lvl 130" style="margin-left:76px; margin-top:76px; position:absolute;"></td></tr></tbody></table>
<br><a href="index.php?do=guildbattles:0"><b>Guild Wars</b></a><br>Status: Resting<br>Time Left: 10 hrs 19 mins<br><br>

This is the code that is related to the 'field view' I believe, so whilst running on the game that is when i viewed the source.

><table style="border:solid 1px #000099;" width="650px" height="650px" background="images/square3.gif"><tbody><tr><td><a href="index.php?do=killmob:2c4c1315e04cfb8941a18271f1ed064f"><img border="0" src="images/mboss2.gif" title="Click Me!" style="margin-left:340px; margin-top:40px; position:absolute;"

This snippet of code relates to the actual object I believe. It is mboss2.gif which is an image of a chest. The link href="index.php?do=killmob:2c4c1315e04cfb8941a18271f1ed064f is the link that occurs when the chest is clicked on ie gathering it.

<html><head>

<title>Map</title>

<style type="text/css">

body {

background-image: url(images/bg18oo.jpg);

background-attachment: fixed;

background-position:center center;

background-repeat:no-repeat;

color: white;

font: 11px verdana;

}

table {

border-style: none;

padding: 0px;

font: 11px verdana;

}

td {

border-style: none;

padding: 0px;

vertical-align: top;

}

td.top {

border-bottom: solid 0px black;

}

td.left {

width: 150px;

border-right: solid 0px black;

}

td.right {

width: 150px;

border-left: solid 0px black;

}

a {

color: #ffffff;

text-decoration: none;

font-weight: bold;

}

a:hover {

color: #ffffff;

}

.small {

font: 10px verdana;

}

.highlight {

color: red;

}

.light {

color: #999999;

}

.title {

color: #5D5F54;

border: solid 0px black;

background-color: #eeeeee;

background-color:transparent;

font-weight: bold;

padding: 0px;

margin: 0px;

}

.copyright {

border: solid 0px black;

background-color: #eeeeee;

background-color:transparent;

font: 10px verdana;

}

</style>

</head>

<body><center>

<div align="center" style="position: absolute; left: 0px; top: 0px; width: 500px; height: 500px; z-index: 29;"><img src="images/map.gif"><div align="center" style="position: absolute; left: 495px; top: 368px; width: 0px; height: 0px;"><img src="images/map_yellow.gif" title="Irpwnzorz - Lvl 130"></div></div>

</center>

</body></html>

That portion of code is from the clickable map to view the whole ''world''.

To better contextualise there is an overview map that shows a 600x600 square world.

Within the game there is a field that is 7x7 with your player in the middle. You move around this field and your position can be seen on the whole world view via the larger map.

Does this help?

L0adOpt1c · 01-10-2013, 01:56 PM

So you want an image map that shows where your character is at all times, like a live feed?

By the way, I see you have inline styles. I would suggest an external style sheet for ALL CSS code. This makes editing much simpler, because frankly, that is a gigantic jumble of code.

Elldee · 01-10-2013, 01:59 PM

No the overview map is directly linked to position on the field.

So all I need to do is refresh the pre-existing image map to see where my character is.

What im wanting is to find the specific images (The image of the chest: src="images/mboss2.gif'' within the image map that shows my position.

To correlate them so I don't have to search the entirity of the map blindly.

Basically the chests are 'hidden' ie you have to search the field (7x7 view) to find them. The map shows the overview of the world and your position. So hopefully I can find the exact location of each chest somehow and put those co-ordinates ontop of the existing world map to show me exactly where to go to find them?

L0adOpt1c · 01-10-2013, 02:13 PM

Prepare for much code.

Perhaps you could use an OnChange element?

Code:

<input type="text" name="txt" value="Hello" onchange="checkField(this.value)">

Which just changes something when the value of an element is changed.

This one fires as soon as some text has been selected, so you could set a highlight of the image whenever you select the name of it from a list in the page.

Code:

<input type="text" onselect="showMsg() value="Hello world!">

This one simply displays something of your choosing when a certain key is pressed down, this one is easy to play with.

Code:

<input type="text" onkeypress="displayResult()">

This one activates something when a button is clicked. You could add the image popping out whenever said button is pressed.

Code:

<button onclick="copyText()">Copy Text</button>

When you're moving your mouse over an image, this can be made to make it pop out or be otherwise brought into view.

Code:

<img onmousemove="bigImg(this)" src="smiley.gif" alt="Smiley">

Different version:

Code:

<img onmouseover="bigImg(this)" src="smiley.gif" alt="Smiley">

Hope this helps.
Code obtained from w3schools.com.

Elldee · 01-10-2013, 02:41 PM

How would i get this to work over the overview map as oppose to having to search on the field?

L0adOpt1c · 01-10-2013, 03:25 PM

Just input it into the HTML map element. Or whatever calls the element that displays the chest.