ASP.NET-only Image Map With Swap?

	Home Register Search Help Login

Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums

Recent Posts

Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

ASP.NET-only Image Map With Swap?

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> General Web Development >> ASP.NET-only Image Map With Swap?

Page: [1]

IronWill

Posts: 104
Joined: 3/8/2007
Status: offline

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...


IronWill Posts: 104 Joined: 3/8/2007 Status: offline	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. (in reply to IronWill)

rdouglass

Posts: 9228
From: Biddeford, ME USA
Status: offline

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?

_____________________________

Don't take you're eye off your final destination.

ASP Checkbox Function Tutorial.

(in reply to IronWill)


IronWill Posts: 104 Joined: 3/8/2007 Status: offline	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". (in reply to rdouglass)


rdouglass Posts: 9228 From: Biddeford, ME USA Status: offline	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? _____________________________ Don't take you're eye off your final destination. ASP Checkbox Function Tutorial. (in reply to IronWill)


IronWill Posts: 104 Joined: 3/8/2007 Status: offline	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!!!!! (in reply to rdouglass)