| View previous topic :: View next topic |
| Author |
Message |
maX1mus
Joined: 17 Jun 2004
Posts: 2
|
| Posted: Thu Jun 17, 2004 3:44 pm usemap="#Map" Problem. |
|
|
Hello!
I´m trying this cool feature for the first time.
It works really well on a standalone picture:
http://independence.myftp.org/map/
(simple test)
But when i try to inplement it on my website/header:
http://independence.myftp.org/
(wich uses php nuke)
, it messes up the tables etc, any ideas or tips are apreciated!
Thanks in advance - maX1mus |
|
|
mjpliv
Joined: 11 May 2004
Posts: 402
Location: Nova Scotia
|
| Posted: Fri Jun 18, 2004 11:28 am |
|
|
First off let me say you have an awesome website. Visually very appealing. I love the colors and the "wet look" graphics. Well done!
I can't see any reason for the mapped image not to work.
I am curious why the img tag specifies a display size when that size matches the image's actual size though, seems like unecessary code.
Can you post the snipet of code where you tried to incorporate the mapped image into your page? There might be something there. Also you have some unneeded table tags in your test HTML but they don't affect anything (unless you inserted them into your working page then they will definately bugger up your tables). |
|
|
maX1mus
Joined: 17 Jun 2004
Posts: 2
|
| Posted: Fri Jun 18, 2004 12:07 pm Code |
|
|
Hi!
Fun you like the look, so do i... ;)
Thats an big advantage with php nuke and such, very fast to make big changes :)
Well the Header isn´t that big so i thought maby it´s best if you get the whole code:
Original:
Code: <table align=\"center\" cellpadding=\"0\" height=99 cellspacing=\"0\" width=\"95%\" border=\"0\" align=\"center\">
<tr>
<td valign=\"top\" align=\"right\" background=\"themes/Labs/images/headerleft.gif\" width=\"80\"></td>
<td valign=\"top\" align=\"center\" width=\"825\">
<table width=825 border=0 cellpadding=0 cellspacing=0>
<tr>
<td rowspan=4> <img src=\"themes/Labs/images/header_01.gif\" width=59 height=125></td>
<td colspan=5> <img src=\"themes/Labs/images/header_02.jpg\" width=693 height=87></td>
<td rowspan=4> <img src=\"themes/Labs/images/header_03.gif\" width=73 height=125></td>
</tr>
<tr>
<td colspan=5> <img src=\"themes/Labs/images/header_04.gif\" width=693 height=5></td>
</tr>
<tr>
<td> <a href=\"index.php\"
onMouseOver=\"changeImages('header_05', 'themes/Labs/images/header_05-over.gif'); return true;\"
onMouseOut=\"changeImages('header_05', 'themes/Labs/images/header_05.gif'); return true;\">
<img name=\"header_05\" src=\"themes/Labs/images/header_05.gif\" width=174 height=28 border=0></a></td>
<td> <a href=\"modules.php?name=Your_Account&op=new_user\"
onMouseOver=\"changeImages('header_06', 'themes/Labs/images/header_06-over.gif'); return true;\"
onMouseOut=\"changeImages('header_06', 'themes/Labs/images/header_06.gif'); return true;\">
<img name=\"header_06\" src=\"themes/Labs/images/header_06.gif\" width=164 height=28 border=0></a></td>
<td> <a href=\"modules.php?op=modload&name=Forums&file=index\"
onMouseOver=\"changeImages('header_07', 'themes/Labs/images/header_07-over.gif'); return true;\"
onMouseOut=\"changeImages('header_07', 'themes/Labs/images/header_07.gif'); return true;\">
<img name=\"header_07\" src=\"themes/Labs/images/header_07.gif\" width=163 height=28 border=0></a></td>
<td> <a href=\"modules.php?op=modload&name=Downloads&file=index\"
onMouseOver=\"changeImages('header_08', 'themes/Labs/images/header_08-over.gif'); return true;\"
onMouseOut=\"changeImages('header_08', 'themes/Labs/images/header_08.gif'); return true;\">
<img name=\"header_08\" src=\"themes/Labs/images/header_08.gif\" width=174 height=28 border=0></a></td>
<td rowspan=2> <img src=\"themes/Labs/images/header_09.gif\" width=18 height=33></td>
</tr>
<tr>
<td colspan=4> <img src=\"themes/Labs/images/header_10.gif\" width=675 height=5></td>
</tr>
</table>
</td>
<td valign=\"top\" align=\"left\" background=\"themes/Labs/images/headeright.gif\" width=\"80\"></td>
</tr>
<tr>
<td valign=\"top\" align=\"right\" background=\"themes/Labs/images/header2left.gif\" width=\"80\"></td>
<td valign=\"top\" align=\"center\" width=\"825\"><img src=\"themes/Labs/images/header2.gif\" width=\"825\" height=\"20\"></td>
<td valign=\"top\" align=\"left\" background=\"themes/Labs/images/header2right.gif\" width=\"80\"></td>
</tr>
</table>
<!-- FIN DEL TITULO -->
<table width=\"95%\" cellpadding=\"2\" cellspacing=\"0\" border=\"0\" align=\"center\"><tr valign=\"top\">
<td></td>
<td width=\"150\" valign=\"top\">
And the code after i modifyed it (Im no elite coder and this is new to me so im not sure if there is any rules about this):
Code: <table align=\"center\" cellpadding=\"0\" height=99 cellspacing=\"0\" width=\"95%\" border=\"0\" align=\"center\">
<tr>
<td valign=\"top\" align=\"right\" background=\"themes/Labs/images/headerleft.gif\" width=\"80\"></td>
<td valign=\"top\" align=\"center\" width=\"825\">
<table width=825 border=0 cellpadding=0 cellspacing=0>
<tr>
<td rowspan=4> <img src=\"themes/Labs/images/header_01.gif\" width=59 height=125></td>
<td colspan=5> <img src=\"themes/Labs/images/header_02.jpg\" width=693 height=87 usemap=#header></td>
<td rowspan=4> <img src=\"themes/Labs/images/header_03.gif\" width=73 height=125></td>
<map name="header">
<area shape="rect" coords="492,62,548,80" href="http://dcdev.net/yhub/" target="_blank">
<area shape="rect" coords="556,63,633,79" href="http://www.ukdnb.dsl.pipex.com/dcpluspluskcdm/" target="_blank">
</map>
</tr>
<tr>
<td colspan=5> <img src=\"themes/Labs/images/header_04.gif\" width=693 height=5></td>
</tr>
<tr>
<td> <a href=\"index.php\"
onMouseOver=\"changeImages('header_05', 'themes/Labs/images/header_05-over.gif'); return true;\"
onMouseOut=\"changeImages('header_05', 'themes/Labs/images/header_05.gif'); return true;\">
<img name=\"header_05\" src=\"themes/Labs/images/header_05.gif\" width=174 height=28 border=0></a></td>
<td> <a href=\"modules.php?name=Your_Account&op=new_user\"
onMouseOver=\"changeImages('header_06', 'themes/Labs/images/header_06-over.gif'); return true;\"
onMouseOut=\"changeImages('header_06', 'themes/Labs/images/header_06.gif'); return true;\">
<img name=\"header_06\" src=\"themes/Labs/images/header_06.gif\" width=164 height=28 border=0></a></td>
<td> <a href=\"modules.php?op=modload&name=Forums&file=index\"
onMouseOver=\"changeImages('header_07', 'themes/Labs/images/header_07-over.gif'); return true;\"
onMouseOut=\"changeImages('header_07', 'themes/Labs/images/header_07.gif'); return true;\">
<img name=\"header_07\" src=\"themes/Labs/images/header_07.gif\" width=163 height=28 border=0></a></td>
<td> <a href=\"modules.php?op=modload&name=Downloads&file=index\"
onMouseOver=\"changeImages('header_08', 'themes/Labs/images/header_08-over.gif'); return true;\"
onMouseOut=\"changeImages('header_08', 'themes/Labs/images/header_08.gif'); return true;\">
<img name=\"header_08\" src=\"themes/Labs/images/header_08.gif\" width=174 height=28 border=0></a></td>
<td rowspan=2> <img src=\"themes/Labs/images/header_09.gif\" width=18 height=33></td>
</tr>
<tr>
<td colspan=4> <img src=\"themes/Labs/images/header_10.gif\" width=675 height=5></td>
</tr>
</table>
</td>
<td valign=\"top\" align=\"left\" background=\"themes/Labs/images/headeright.gif\" width=\"80\"></td>
</tr>
<tr>
<td valign=\"top\" align=\"right\" background=\"themes/Labs/images/header2left.gif\" width=\"80\"></td>
<td valign=\"top\" align=\"center\" width=\"825\"><img src=\"themes/Labs/images/header2.gif\" width=\"825\" height=\"20\"></td>
<td valign=\"top\" align=\"left\" background=\"themes/Labs/images/header2right.gif\" width=\"80\"></td>
</tr>
</table>
<!-- FIN DEL TITULO -->
<table width=\"95%\" cellpadding=\"2\" cellspacing=\"0\" border=\"0\" align=\"center\"><tr valign=\"top\">
<td></td>
<td width=\"150\" valign=\"top\">
I´m really not sure if there should be " " or not, and the thing im suspecting, messing the site up is that i already use this map thing in the footer...
Now i´ve also tried this:
Code: <td colspan=5> <img src=\"themes/Labs/images/header_02.jpg\" width=693 height=87 usemap="#header"></td>
Also tried to put this:
Code: <map name="header">
<area shape="rect" coords="492,62,548,80" href="http://dcdev.net/yhub/" target="_blank">
<area shape="rect" coords="556,63,633,79" href="http://www.ukdnb.dsl.pipex.com/dcpluspluskcdm/" target="_blank">
</map>
after </tables>
But same result... :cry:
As usual: any tips or ideas are welcome - maX1mus
(sorry about the "spam") |
|
|
mjpliv
Joined: 11 May 2004
Posts: 402
Location: Nova Scotia
|
| Posted: Fri Jun 18, 2004 12:53 pm |
|
|
I set up a mapped gif nested inside a table and could not mess up the table structure no matter where I put the map tag.
I haven't tested this theory but it may be the row under the image that you want to map that is causing the trouble. If you look at the following (copied from your source) row contents, the last table data tag has a rowspan of 2 for a total of 6 columns on this row but the previous row only had one item with a column span of 5.
Code: <tr>
<td> <a href="index.php"
onMouseOver="changeImages('header_05', 'themes/Labs/images/header_05-over.gif'); return true;"
onMouseOut="changeImages('header_05', 'themes/Labs/images/header_05.gif'); return true;">
<img name="header_05" src="themes/Labs/images/header_05.gif" width=174 height=28 border=0></a></td>
<td> <a href="modules.php?name=Your_Account&op=new_user"
onMouseOver="changeImages('header_06', 'themes/Labs/images/header_06-over.gif'); return true;"
onMouseOut="changeImages('header_06', 'themes/Labs/images/header_06.gif'); return true;">
<img name="header_06" src="themes/Labs/images/header_06.gif" width=164 height=28 border=0></a></td>
<td> <a href="modules.php?op=modload&name=Forums&file=index"
onMouseOver="changeImages('header_07', 'themes/Labs/images/header_07-over.gif'); return true;"
onMouseOut="changeImages('header_07', 'themes/Labs/images/header_07.gif'); return true;">
<img name="header_07" src="themes/Labs/images/header_07.gif" width=163 height=28 border=0></a></td>
<td> <a href="modules.php?op=modload&name=Downloads&file=index"
onMouseOver="changeImages('header_08', 'themes/Labs/images/header_08-over.gif'); return true;"
onMouseOut="changeImages('header_08', 'themes/Labs/images/header_08.gif'); return true;">
<img name="header_08" src="themes/Labs/images/header_08.gif" width=174 height=28 border=0></a></td>
<td rowspan=2> <img src="themes/Labs/images/header_09.gif" width=18 height=33></td>
</tr> |
|
|
| |
|
|
|
