clintonG
Mon Sep 25 10:12:06 CDT 2006
Here's the solution I tried to explain to you...
<div id="MapBanner">
<asp:ImageMap ID="mapBanner" runat="server" ImageUrl="top_banner.jpg"
ImageAlign="Bottom" Height="82px">
</asp:ImageMap>
</div>
<div id="MapNavBanner" style="margin:-.25em 0 0 0;">
<asp:ImageMap ID="mapNavBanner" runat="server" ImageUrl="navigation.jpg"
ImageAlign="Top" Height="19px">
</asp:ImageMap>
</div>
<%= Clinton Gallagher
NET csgallagher AT metromilwaukee.com
URL
http://clintongallagher.metromilwaukee.com/
MAP 43°2'17"N 88°2'37"W : 43°2'17"N 88°2'37"W
"Nathan Sokalski" <njsokalski@hotmail.com> wrote in message
news:eEVrUcF4GHA.1848@TK2MSFTNGP06.phx.gbl...
> The exact code in my *.ascx file is:
>
>
> <%@ Control Language="vb" AutoEventWireup="false"
> CodeBehind="titlebanner.ascx.vb" Inherits="AFBE.titlebanner" %>
> <table border="0" cellpadding="0" cellspacing="0" width="100%">
> <tr>
> <td align="center" style="margin:0px;padding:0px;">
> <asp:ImageMap ID="mapBanner" runat="server" BorderWidth="0px"
> Height="82px" ImageUrl="../images/top_banner.jpg" Width="1000px"
> style="margin:0px;padding:0px;">
> <asp:RectangleHotSpot Left="125" Top="5" Right="200" Bottom="22"
> NavigateUrl="about" AlternateText="About AFBE" />
> <asp:RectangleHotSpot Left="206" Top="5" Right="347" Bottom="22"
> NavigateUrl="foundation" AlternateText="Foundation Scholarship" />
> <asp:RectangleHotSpot Left="353" Top="5" Right="421" Bottom="22"
> NavigateUrl="contact.asp" AlternateText="Contact Us" />
> <asp:RectangleHotSpot Left="425" Top="5" Right="511" Bottom="22"
> NavigateUrl="affiliates" AlternateText="Affiliate Login" />
> <asp:RectangleHotSpot Left="857" Top="37" Right="896" Bottom="65"
> NavigateUrl="" AlternateText="English Version" />
> <asp:RectangleHotSpot Left="902" Top="37" Right="940" Bottom="65"
> NavigateUrl="espanol" AlternateText="Spanish Version" />
> <asp:RectangleHotSpot Left="946" Top="37" Right="984" Bottom="65"
> NavigateUrl="francis" AlternateText="French Version" />
> </asp:ImageMap>
> <asp:ImageMap ID="mapNavBanner" runat="server" Width="1000" Height="19"
> BorderWidth="0" ImageUrl="../images/navigation.jpg"
> style="margin:0px;padding:0px;">
> <asp:RectangleHotSpot Left="7" Top="1" Right="188" Bottom="16"
> NavigateUrl="exposure" AlternateText="National Exposure Service" />
> <asp:RectangleHotSpot Left="203" Top="1" Right="323" Bottom="16"
> NavigateUrl="athletes" AlternateText="Athlete Database" />
> <asp:RectangleHotSpot Left="336" Top="1" Right="428" Bottom="16"
> NavigateUrl="tournaments" AlternateText="Tournaments" />
> <asp:RectangleHotSpot Left="442" Top="1" Right="555" Bottom="16"
> NavigateUrl="summercamps" AlternateText="Summer Camps" />
> <asp:RectangleHotSpot Left="569" Top="1" Right="659" Bottom="16"
> NavigateUrl="coaches" AlternateText="For Coaches" />
> <asp:RectangleHotSpot Left="673" Top="1" Right="858" Bottom="16"
> NavigateUrl="opportunities" AlternateText="Employment Opportunities" />
> <asp:RectangleHotSpot Left="873" Top="1" Right="917" Bottom="16"
> NavigateUrl="" AlternateText="Home" />
> </asp:ImageMap>
> </td>
> </tr>
> </table>
>
>
> The exact code that this renders is:
>
>
> <table border="0" cellpadding="0" cellspacing="0" width="100%">
> <tr>
> <td align="center" style="margin:0px;padding:0px;">
> <img id="titlebanner1_mapBanner" src="images/top_banner.jpg"
> usemap="#ImageMaptitlebanner1_mapBanner"
> style="border-width:0px;height:82px;width:1000px;margin:0px;padding:0px;"
> /><map name="ImageMaptitlebanner1_mapBanner">
> <area shape="rect" coords="125,5,200,22" href="usercontrols/about"
> title="About AFBE" alt="About AFBE" /><area shape="rect"
> coords="206,5,347,22" href="usercontrols/foundation" title="Foundation
> Scholarship" alt="Foundation Scholarship" /><area shape="rect"
> coords="353,5,421,22" href="usercontrols/contact.asp" title="Contact Us"
> alt="Contact Us" /><area shape="rect" coords="425,5,511,22"
> href="usercontrols/affiliates" title="Affiliate Login" alt="Affiliate
> Login" /><area shape="rect" coords="857,37,896,65" href="" title="English
> Version" alt="English Version" /><area shape="rect" coords="902,37,940,65"
> href="usercontrols/espanol" title="Spanish Version" alt="Spanish Version"
> /><area shape="rect" coords="946,37,984,65" href="usercontrols/francis"
> title="French Version" alt="French Version" />
> </map>
> <img id="titlebanner1_mapNavBanner" src="images/navigation.jpg"
> usemap="#ImageMaptitlebanner1_mapNavBanner"
> style="border-width:0px;height:19px;width:1000px;margin:0px;padding:0px;"
> /><map name="ImageMaptitlebanner1_mapNavBanner">
> <area shape="rect" coords="7,1,188,16" href="usercontrols/exposure"
> title="National Exposure Service" alt="National Exposure Service" /><area
> shape="rect" coords="203,1,323,16" href="usercontrols/athletes"
> title="Athlete Database" alt="Athlete Database" /><area shape="rect"
> coords="336,1,428,16" href="usercontrols/tournaments" title="Tournaments"
> alt="Tournaments" /><area shape="rect" coords="442,1,555,16"
> href="usercontrols/summercamps" title="Summer Camps" alt="Summer Camps"
> /><area shape="rect" coords="569,1,659,16" href="usercontrols/coaches"
> title="For Coaches" alt="For Coaches" /><area shape="rect"
> coords="673,1,858,16" href="usercontrols/opportunities" title="Employment
> Opportunities" alt="Employment Opportunities" /><area shape="rect"
> coords="873,1,917,16" href="" title="Home" alt="Home" />
> </map>
> </td>
> </tr>
> </table>
>
>
> I don't know why it would help, but the two images are located at:
>
>
http://www.mosaicinc.net/clients/afbe/images/top_banner.jpg
>
http://www.mosaicinc.net/clients/afbe/images/navigation.jpg
>
> The width & height that I specify in my code (1000x82 & 1000x19) are
> correct, and I also tried not specifying a width & height, but neither
> made any difference. The only working solution I have found is to write
> the html by hand and place a <br/> between the img & map tags. If you go
> to:
>
>
http://www.mosaicinc.net/clients/afbe/
>
> you can see the two imagemaps at the top without any empty space between
> them. But if you look at the source code, you will notice that there is a
> <br> tag between the img and map tags (the page that is currently there is
> written in Classic ASP, I need to convert it to ASP.NET, and I would
> rather use the ImageMap control than manually write the html). If there is
> any other information that might help you help me find a solution, let me
> know. Thanks.
> --
> Nathan Sokalski
> njsokalski@hotmail.com
>
http://www.nathansokalski.com/
>
> "clintonG" <csgallagher@REMOVETHISTEXTmetromilwaukee.com> wrote in message
> news:O$H7G0D4GHA.4588@TK2MSFTNGP04.phx.gbl...
>> What does the ImageMap control render in the html? A div of its own or
>> the tables you have been pasting into this news article? You might be
>> asked to put the images you are using on a server with a URL I or others
>> can look at before we could help any further.
>>
>> <%= Clinton
>>
>> "Nathan Sokalski" <njsokalski@hotmail.com> wrote in message
>> news:e%23kHRrA4GHA.4748@TK2MSFTNGP04.phx.gbl...
>>> That didn't help either. I tried using the following tag layout:
>>>
>>> <div style="margin:0px;padding:0px;">
>>> <asp:ImageMap ID="mapBanner" runat="server" BorderWidth="0px"
>>> Height="82px" ImageUrl="../images/top_banner.jpg" Width="1000px"
>>> style="margin:0px;padding:0px;">
>>> </asp:ImageMap>
>>> </div>
>>> <div style="margin:0px;padding:0px;">
>>> <asp:ImageMap ID="mapNavBanner" runat="server" Width="1000"
>>> Height="19" BorderWidth="0" ImageUrl="../images/navigation.jpg"
>>> style="margin:0px;padding:0px;">
>>> </asp:ImageMap>
>>> </div>
>>>
>>> but the whitestrip still shows up between the ImageMaps. Any other
>>> ideas? Thanks.
>>> --
>>> Nathan Sokalski
>>> njsokalski@hotmail.com
>>>
http://www.nathansokalski.com/
>>>
>>> "clintonG" <csgallagher@REMOVETHISTEXTmetromilwaukee.com> wrote in
>>> message news:uIktbKA4GHA.3476@TK2MSFTNGP04.phx.gbl...
>>>> Try it the way I suggested. Get them out of the td and into divs of
>>>> their own.
>>>>
>>>> <%= Clinton
>>>>
>>>> "Nathan Sokalski" <njsokalski@hotmail.com> wrote in message
>>>> news:%23zgaf743GHA.4632@TK2MSFTNGP03.phx.gbl...
>>>>>I have tried using CSS properties to control this, but it does not seem
>>>>>to help. Here is my actual code (I removed the <asp:RectangleHotSpot/>
>>>>>tags to shorten it):
>>>>>
>>>>> <table border="0" cellpadding="0" cellspacing="0" width="100%">
>>>>> <tr>
>>>>> <td align="center" style="margin:0px;padding:0px;">
>>>>> <asp:ImageMap ID="mapBanner" runat="server"
>>>>> BorderWidth="0px" Height="82px" ImageUrl="../images/top_banner.jpg"
>>>>> Width="1000px" style="margin:0px;padding:0px;">
>>>>> </asp:ImageMap>
>>>>> <asp:ImageMap ID="mapNavBanner" runat="server"
>>>>> Width="1000" Height="19" BorderWidth="0"
>>>>> ImageUrl="../images/navigation.jpg" style="margin:0px;padding:0px;">
>>>>> </asp:ImageMap>
>>>>> </td>
>>>>> </tr>
>>>>> </table>
>>>>>
>>>>> I have also tried using two separate table rows, which did not help
>>>>> either. Any other ideas? Thanks.
>>>>> --
>>>>> Nathan Sokalski
>>>>> njsokalski@hotmail.com
>>>>>
http://www.nathansokalski.com/
>>>>>
>>>>> "clintonG" <csgallagher@REMOVETHISTEXTmetromilwaukee.com> wrote in
>>>>> message news:%233Ugyf43GHA.1292@TK2MSFTNGP03.phx.gbl...
>>>>>> Put each control into a separate Panel or div and use styled margins
>>>>>> to manage white space.
>>>>>>
>>>>>> <%= Clinton Gallagher
>>>>>> NET csgallagher AT metromilwaukee.com
>>>>>> URL
http://clintongallagher.metromilwaukee.com/
>>>>>> MAP 43°2'17"N 88°2'37"W : 43°2'17"N 88°2'37"W
>>>>>>
>>>>>> "Nathan Sokalski" <njsokalski@hotmail.com> wrote in message
>>>>>> news:OZqaXS33GHA.3476@TK2MSFTNGP04.phx.gbl...
>>>>>>>I am using ASP.NET 2.0's ImageMap Control to create 2 imagemaps, one
>>>>>>>directly below the other. When I do this a thin blank space appears
>>>>>>>between them. After several days of frustration I realized that the
>>>>>>>difference between what the ImageMap Control outputs and the html on
>>>>>>>the page I was trying to reproduce with ASP.NET 2.0 was the
>>>>>>>following:
>>>>>>>
>>>>>>>
>>>>>>> Handwritten HTML imagemaps (no whitestrip between them):
>>>>>>>
>>>>>>> <table>
>>>>>>> <tr>
>>>>>>> <td>
>>>>>>> <img/><br/>
>>>>>>> <map>
>>>>>>> <area/>
>>>>>>> </map>
>>>>>>> <img/><br/>
>>>>>>> <map>
>>>>>>> <area/>
>>>>>>> </map>
>>>>>>> </td>
>>>>>>> </tr>
>>>>>>> </table>
>>>>>>>
>>>>>>> ASP.NET 2.0 generated HTML using the ImageMap Control (whitestrip
>>>>>>> appears between the two ImageMaps):
>>>>>>>
>>>>>>> <table>
>>>>>>> <tr>
>>>>>>> <td>
>>>>>>> <img/>
>>>>>>> <map>
>>>>>>> <area/>
>>>>>>> </map>
>>>>>>> <img/>
>>>>>>> <map>
>>>>>>> <area/>
>>>>>>> </map>
>>>>>>> </td>
>>>>>>> </tr>
>>>>>>> </table>
>>>>>>>
>>>>>>>
>>>>>>> In case you didn't see it, the difference is that the handwritten
>>>>>>> HTML includes a <br/> between the <img/> and <map> tags. However,
>>>>>>> this is not achievable (at least not using any technique I can think
>>>>>>> of) using the ASP.NET 2.0 ImageMap Control. What can I do? Thanks.
>>>>>>> --
>>>>>>> Nathan Sokalski
>>>>>>> njsokalski@hotmail.com
>>>>>>>
http://www.nathansokalski.com/
>>>>>>>
>>>>>>
>>>>>>
>>>>>
>>>>>
>>>>
>>>>
>>>
>>>
>>
>>
>
>
