Help needed with image mapping

[the maya]

My problem is simple (I think)! I have about 1000 images that need to be mapped (hotspotted). Because there are so many coords I will be storing them in a database.

Can anybody tell me how I can bind the oords to the image when I retrive them from that database. I have scoured the web and can't find any examples but I'm sure it must be possible.

I'm using asp.net & c#. If anyone has an example I can work from I would be extremely grateful. :dunno:

 

[playminigames]

you can make a random id for the picture, or just use the picture name, and then make a new row for every image with the same picture id, cords, and shape. im not familiar with c# or asp.net, so i cant provide a working example. I'm sorry if this just confused you, but i hope i helped.

 

[the maya]

i think I'm getting there. I can extract the data from MySQL using either the DataReader or DataAdapter methods but I now need to bind it to the MAP.

The MAP code looks like this:

<map id="map1">
<asp:Repeater ID="rep" runat="server">
<ItemTemplate>
<div align="center">

<area href="#"
shape="SHAPE GOES HERE"
coords="COORDS GO HERE"
alt="" />
</ItemTemplate>
</asp:Repeater>
</map>
<img src="IMAGE GOES HERE" alt="glyph" usemap="#map1" />

I tried using EVALand BIND but it won't recognise the fields from my sql results. Any clues as to how I can complete the SHAPE, COORDS and IMAGE.

 

[misson]

The following seems to work, though it's not the best way of going about things. Are you doing something different?

Default.aspx.cs:

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Configuration;
using System.Data;
using System.Data.SqlClient;
//using System.Linq;
//using System.Data.Linq;

namespace ImgMap {
    public partial class _Default : System.Web.UI.Page {
        protected void Page_Load(object sender, EventArgs e) {
            /* Oh, but for LINQ */
            String dataConnStr = WebConfigurationManager.ConnectionStrings["DataConnectionString"].ConnectionString;
            SqlConnection data = new SqlConnection(dataConnStr);
            SqlDataAdapter query = new SqlDataAdapter("SELECT shape, coords,alt FROM dbo.Areas WHERE map='map1'", data);
            DataSet mapItems = new DataSet();
            query.Fill(mapItems);

            shapeAreas.DataSource = mapItems;
            shapeAreas.DataBind();
        }
    }
}

in Default.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ImgMap._Default"  %>
  ...
    <map id="map1" name="map1">
    <asp:Repeater ID="shapeAreas" runat="server">
        <ItemTemplate>
            <area href="#" 
                  shape="<%# Eval("shape") %>" 
                  coords="<%# Eval("coords") %>"
                  alt="<%# Eval("alt") %>"
                  />
        </ItemTemplate>
    </asp:Repeater>
    </map>

in Web.config:

	<connectionStrings>
		<add name="DataConnectionString" connectionString="Data Source=..." providerName="System.Data.SqlClient"/>
	</connectionStrings>

Table "dbo.Areas", as you can probably guess, stores the shape, coordinates, alt text and name of the associated map for every area element. If areas can appear in more than one map, the map-area relationship would be in another table, but (for the purposes of this sample) a separate table didn't appear necessary.

 

[the maya]

Thanks. This brilliant and just what I needed. I was working on something similar with asp:imagemap but that was a last resort as it does not have the "onmouseover" attribute.

One minor problem. I used your code and in my .cs file I get a red squiggly line under the map1 reference
which says that "The name map1 does not exist in the current context". Have I missed something?

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Web.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using MySql.Data.MySqlClient;

namespace ImgMap
{
    public partial class glyphs : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            MySqlConnection conn;
            MySqlCommand cmd;
            MySqlDataAdapter sda;
            String sConnection;
            DataSet ds;
            String sid;

            sConnection = ConfigurationManager.ConnectionStrings["MayaConnectionString"].ConnectionString;
            conn = new MySqlConnection(sConnection);

            if (!Page.IsPostBack)
            {
                sid = Request.QueryString["id"];
                sid = "1";
                if (sid != null)
                {
                    try
                    {
                        String x;

                        cmd = new MySqlCommand("select g.gimage imgsrc, g1.gshape shape, g1.gcoords coords, g1.ghref ghref, g1.galttext alt"
                                                + " from glyphs AS g"
                                                + " left join glyphmap AS g1 on g.idglyphs = g1.gid"
                                                + " where g.idglyphs = 1", conn);

                        conn.Open();

                        cmd.ExecuteNonQuery();

                        sda = new MySqlDataAdapter(cmd);
                        ds = new DataSet();
                        sda.Fill(ds, "mapitems");

                        map1.DataSource = ds.Tables[0].DefaultView;
                        map1.DataBind();


                        // close database connection
                        conn.Close();
                    }
                    catch (Exception x)
                    {
                        Label1.Text = "{0} Exception caught." + x;
                    }
                }
            }

        }
    }
}

 

[misson]

One minor problem. I used your code and in my .cs file I get a red squiggly line under the map1 reference
which says that "The name map1 does not exist in the current context". Have I missed something?

My mistake; it's been fixed in the previous post. In the original code, #map1 was called "shapesMap". I incorrectly changed the name in the page load handler from "shapeAreas" to "map1". "map1" comes from the <map id="map1" name="map1"> element. If it had a 'runat="server"' attribute, you wouldn't get the error.

Make sure you sanitize input (such as Request.QueryString["id"]) before you use it.

Forgot to mention, you can format text as code by encasing it in

, [php] and [html] tags as appropriate, which makes it much more readable (as you can see from my post). Please edit your post and add the tags.

 

[the maya]

Thanks, that's fixed it.
Edit:
Sorry, 1 more thing. How do I bind the image url to the img tag:

   <map id="map1" name="map1" >
    <asp:Repeater ID="shapeAreas" runat="server">
        <ItemTemplate>
            <area href="<%# Eval("ghref") %>" 
                  shape="<%# Eval("shape") %>" 
                  coords="<%# Eval("coords") %>"
                  alt="<%# Eval("alt") %>"
                  onmouseover=""
                  onmouseout=""
                  />
        </ItemTemplate>
    </asp:Repeater>
    </map>
           
    <img id="mapSrc" src="IMAGE GOES HERE" alt="glyph" border="0" usemap="#map1"/>

Edit:
Got it! Simple (and basic) mistake. I forgot to add the runat="server" in my <img> thus:

<img id="imgSrc" src="" alt="glyph" border="0" runat="server" usemap="#map1"/>


then in the code behind:

imgSrc.Src = (string)ds.Tables["mapitems"].Rows[0]["gimage"];


All good now.