K
Kevin Vaughn
Is it possible to use image maps to divide up a picture acting as an image
button?
I have created a map of a building, and now I want to have some sort of
pop-up messages when certain parts of the building are moused over. The
only way I can think to do this (without using javascript), is to divide the
image into sections with an image map and have the pop-ups display my info.
I've never made an image map before, nor have I dealt with asp.net image
buttons up until recently. I just wanted to confirm the feasibility before
I learn image maps and spend a whole day trying to make them work right.
Please help me if you have time.
-Kevin
P.S. Below is the code, in case you're interested in what I'm doing.
Replace acg.gif with a map, and diamond_pink.gif with a marker (mine is an
11x11px diamond). You can click on the map and that's where the diamond
comes up. I'm recording the coordinates in a database, and that alllows me
to see where my computers are. I just need an easy, intuitive, way to
identify the computers.
**** map.aspx ****
<%@ import namespace="system.drawing" %>
<script runat="server">
sub Page_Load
if not ispostback then
ibtnmap.imageurl = "rendermap.aspx"
end if
end sub
sub ibtnmap_click(s as object, e as imageclickeventargs)
ibtnmap.imageurl = "rendermap.aspx?x=" & e.x & "&y=" & e.y
response.write("x is: " & e.x & ", y is: " & e.y)
end sub
</script>
<html>
<body>
<form runat="server">
<asp:imagebutton
id="ibtnmap"
onclick="ibtnmap_click"
runat="server"
/>
</form>
<body>
</html>
**** rendermap.aspx ****
<%@ page contenttype="image/gif" %>
<%@ import namespace="system.drawing" %>
<%@ import namespace="system.drawing.imaging" %>
<script runat="server">
sub Page_Load
dim objbitmap1 as bitmap
dim objbitmap2 as bitmap
dim objstarbitmap as bitmap
dim objgraphics as graphics
dim xcoor as integer = request.querystring("x")
dim ycoor as integer = request.querystring("y")
objstarbitmap = new bitmap("c:\pccasnmp\_images\diamond_pink.gif")
objbitmap1 = new Bitmap("c:\pccasnmp\_images\acg.gif")
objbitmap2 = new bitmap(objbitmap1.width, objbitmap1.height)
objgraphics = graphics.fromimage(objbitmap2)
objgraphics.drawimage(objbitmap1, new rectangle(0,0,objbitmap2.width,
objbitmap2.height),0,0,objbitmap1.width,objbitmap1.height,graphicsunit.pixel
)
objgraphics.drawimage(objstarbitmap,new rectangle(x - 5,y -
5,11,11),0,0,objstarbitmap.width,objstarbitmap.height,graphicsunit.pixel)
objbitmap2.save(response.outputstream,imageformat.gif)
end sub
</script>
button?
I have created a map of a building, and now I want to have some sort of
pop-up messages when certain parts of the building are moused over. The
only way I can think to do this (without using javascript), is to divide the
image into sections with an image map and have the pop-ups display my info.
I've never made an image map before, nor have I dealt with asp.net image
buttons up until recently. I just wanted to confirm the feasibility before
I learn image maps and spend a whole day trying to make them work right.
Please help me if you have time.
-Kevin
P.S. Below is the code, in case you're interested in what I'm doing.
Replace acg.gif with a map, and diamond_pink.gif with a marker (mine is an
11x11px diamond). You can click on the map and that's where the diamond
comes up. I'm recording the coordinates in a database, and that alllows me
to see where my computers are. I just need an easy, intuitive, way to
identify the computers.
**** map.aspx ****
<%@ import namespace="system.drawing" %>
<script runat="server">
sub Page_Load
if not ispostback then
ibtnmap.imageurl = "rendermap.aspx"
end if
end sub
sub ibtnmap_click(s as object, e as imageclickeventargs)
ibtnmap.imageurl = "rendermap.aspx?x=" & e.x & "&y=" & e.y
response.write("x is: " & e.x & ", y is: " & e.y)
end sub
</script>
<html>
<body>
<form runat="server">
<asp:imagebutton
id="ibtnmap"
onclick="ibtnmap_click"
runat="server"
/>
</form>
<body>
</html>
**** rendermap.aspx ****
<%@ page contenttype="image/gif" %>
<%@ import namespace="system.drawing" %>
<%@ import namespace="system.drawing.imaging" %>
<script runat="server">
sub Page_Load
dim objbitmap1 as bitmap
dim objbitmap2 as bitmap
dim objstarbitmap as bitmap
dim objgraphics as graphics
dim xcoor as integer = request.querystring("x")
dim ycoor as integer = request.querystring("y")
objstarbitmap = new bitmap("c:\pccasnmp\_images\diamond_pink.gif")
objbitmap1 = new Bitmap("c:\pccasnmp\_images\acg.gif")
objbitmap2 = new bitmap(objbitmap1.width, objbitmap1.height)
objgraphics = graphics.fromimage(objbitmap2)
objgraphics.drawimage(objbitmap1, new rectangle(0,0,objbitmap2.width,
objbitmap2.height),0,0,objbitmap1.width,objbitmap1.height,graphicsunit.pixel
)
objgraphics.drawimage(objstarbitmap,new rectangle(x - 5,y -
5,11,11),0,0,objstarbitmap.width,objstarbitmap.height,graphicsunit.pixel)
objbitmap2.save(response.outputstream,imageformat.gif)
end sub
</script>