ASP.NET-only Image Map With Swap?

ASP.NET-only Image Map With Swap? (Full Version)

All Forums >> [Web Development] >> General Web Development

Message

IronWill -> ASP.NET-only Image Map With Swap? (4/7/2008 17:51:19)

Hi there!

I've run into a bit of a hurdle here. I currently have an image map (for navigation), coded with JavaScript on one of my ASP (not .NET yet; we'll be enabling the .NET platform very soon for our site) pages. The problem is that the image map JavaScript code I'm using insists that there be a "name" attribute within the <img> tag in order to properly swap the images on mouse-over, and so the page will not validate when I run it through the W3C XHTML (strict) validator.

So, my question is really two-fold: 1-Is there an ASP-only or ASP.NET-only (no JavaScript) way of having an image map with image-swapping work? 2-If there isn't, can anyone tell me of an updated JavaScript method of duplicating what I have functioning now so that it will validate?

My image map is fairly complex, using 8 sections of the map broken into polygonal fields with many points each, so the CSS-only options I've looked at really can't handle this complexity (as far as I've been able to determine, anyway).

Everything *works* fine as it is now, but I want/need it to validate.

Here is a sample of the actual JavaScript code I'm using:





<img class="center" name="emp" src="menus/mcrmenu/mcr-compassflat.png" width="600" height="500" usemap="#map" alt="Children's Main Menu" />

<map name="map" id="map">
<!-- #$-:Image Map file created by GIMP Imagemap Plugin -->
<!-- #$-:GIMP Imagemap Plugin by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.0 -->
<!-- #$AUTHOR:me -->
<area shape="poly" coords="279,184,257,76,179,55,179,0,415,1,415,55,345,75,321,182" title="Library Children's Catalog" alt="Library Children's Catalog" href="http://pac.library.org:90/kids" onmouseover="flip1()" onmouseout="original()" />
<area shape="poly" coords="325,184,433,59,581,59,581,141,457,141,357,218" title="Children's Program Schedule" alt="Children's Program Schedule" href="http://www.library.org/mcrnewslet.asp" onmouseover="flip2()" onmouseout="original()" />
<area shape="poly" coords="359,220,446,205,485,176,563,174,592,214,591,297,551,316,482,315,445,276,358,264" href="http://www.library.org/mcrnewslet.asp#Aboutbooks" title="A Selection of Book Lists for Kids & Teens" alt="A Selection of Book Lists for Kids & Teens" onmouseover="flip3()" onmouseout="original()" />
<area shape="poly" coords="358,271,449,343,557,348,579,377,579,434,534,471,454,471,329,302,359,270" alt="Library's Summer Reading Programs" href="http://www.library.org/mcrsummerprograms.asp" title="Library's Summer Reading Programs" onmouseover="flip4()" onmouseout="original()" />
<area shape="poly" coords="322,302,332,391,388,414,407,438,409,471,349,497,244,497,190,469,192,426,255,396,280,302" title="Reading Lists for Area Schools" alt="Reading Lists for Area Schools" href="http://www.library.org/mcrnewslet.asp#School" onmouseover="flip5()" onmouseout="original()" />
<area shape="poly" coords="273,301,187,383,172,418,96,434,22,415,11,380,54,350,111,347,245,271,272,300" title="A Collection of Parenting Resources" alt="A Collection of Parenting Resources" href="http://www.library.org/mcrparent.asp" onmouseover="flip6()" onmouseout="original()" />
<area shape="poly" coords="242,266,125,274,96,298,45,299,18,278,4,249,4,220,43,187,114,187,242,224" title="A Collection of Resources to Help With Homework" alt="A Collection of Resources to Help With Homework" href="http://www.library.org/mcrstudyhelp.asp" onmouseover="flip7()" onmouseout="original()" />
<area shape="poly" coords="244,218,159,143,42,143,2,118,2,78,50,54,163,54,274,185" title="After-School Fun for Kids of All Ages" alt="After-School Fun for Kids of All Ages" href="http://www.library.org/mcrfunforkids.asp" onmouseover="flip8()" onmouseout="original()" />
</map>

Image1 = new Image(500,600)
Image1.src = "menus/mcrmenu/mcr-compassflat.png"

Image2 = new Image(500,600)
Image2.src = "menus/mcrmenu/mcr-compass1.png"

Image3 = new Image(500,600)
Image3.src = "menus/mcrmenu/mcr-compass2.png"

Image4 = new Image(500,600)
Image4.src = "menus/mcrmenu/mcr-compass3.png"

Image5 = new Image(500,600)
Image5.src = "menus/mcrmenu/mcr-compass4.png"

Image6 = new Image(500,600)
Image6.src = "menus/mcrmenu/mcr-compass5.png"

Image7 = new Image(500,600)
Image7.src = "menus/mcrmenu/mcr-compass6.png"

Image8 = new Image(500,600)
Image8.src = "menus/mcrmenu/mcr-compass7.png"

Image9 = new Image(500,600)
Image9.src = "menus/mcrmenu/mcr-compass8.png"



function flip8() {
document.emp.src = Image9.src; return true;
}

function flip7() {
document.emp.src = Image8.src; return true;
}

function flip6() {
document.emp.src = Image7.src; return true;
}

function flip5() {
document.emp.src = Image6.src; return true;
}

function flip4() {
document.emp.src = Image5.src; return true;
}

function flip3() {
document.emp.src = Image4.src; return true;
}

function flip2() {
document.emp.src = Image3.src; return true;
}

function flip1() {
document.emp.src = Image2.src; return true;
}

function original() {
document.emp.src = Image1.src; return true;
}

Any help will be greatly appreciated, as always! I've Googled this until my head began to spin...[:o]

IronWill -> RE: ASP.NET-only Image Map With Swap? (4/8/2008 12:04:44)
Oh, and if anyone needs to see the image map menu working, I cans end the URL.

rdouglass -> RE: ASP.NET-only Image Map With Swap? (4/8/2008 13:55:14)

With ASP.NET, I use imagemaps like this. This code would be on the ASPX page:

            <asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="~/system_graphics/myimage.JPG" HotSpotMode="PostBack">
                <asp:RectangleHotSpot Bottom="92" Left="10" Right="182" Top="24" PostBackValue="valOne" />
                <asp:RectangleHotSpot Bottom="92" Left="276" Right="460" Top="24" PostBackValue="valTwo" />
            </asp:ImageMap>

and this code would be on a code-behind page:

    Protected Sub ImageMap1_Click(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.ImageMapEventArgs) Handles ImageMap1.Click
        'The PostBackValue is e.PostBackValue
        Select Case e.PostBackValue
            Case "valOne"
                'do this
            Case "valTwo"
                'do this
        End Select
    End Sub

and to be honest, I don't know if it validates but it should since it uses Postbacks.

That help any?

IronWill -> RE: ASP.NET-only Image Map With Swap? (4/8/2008 14:10:18)
Hi! That certainly looks promising... However, do you know of a similar way to handle image swapping? The way my menu works now, when hovered over a hotspot, the whole image is swapped with an almost-duplicate image tailored to look like that area of the imagemap is "glowing" (with light effects on the rest of the image too, so the whole image is actually affected, not just the hovered portion). Then, when hovered off, or to another area, the image is swapped again, either to the original "flat" image, or to the new area that needs to "glow".

rdouglass -> RE: ASP.NET-only Image Map With Swap? (4/8/2008 14:52:21)
Sorry, that I'm not at all sure of. I don't use much in the way of ImageMaps - only when I have to. [;)] About the only thing I can suggest is to try and update the JS to use getElementByID as in something like this: document.emp.src to something like this: document.getElementById('emp').src or something to that effect. Don't know whether that's the exact syntax but it should be close. That any help?

IronWill -> RE: ASP.NET-only Image Map With Swap? (4/8/2008 15:14:14)
You ROCK!!!!!!!!! That worked perfectly, and the page now validates because I can use "ID" instead of "name". A very big THANK YOU to you!!!!! [:D]

Page: [1]

0.046875