Автоматически прокручивайте ImageMap <areas>, чтобы он выглядел как автоматический - PullRequest
Новая
       12

Автоматически прокручивайте ImageMap <areas>, чтобы он выглядел как автоматический

0 голосов
/ 09 февраля 2012

У меня есть ImageMap, который содержит 6 областей, они идут по порядку от 1 до 6, каждый раз, когда вы нажимаете одну из них, запускается функция ResultadosMap_Click (отправитель объекта, ImageMapEventArgs e), которая изменяет текущее представление многовидового представления для отображения содержимогосвязан с этой областью и показывает изображение check.png поверх ImageMap, чтобы сообщить пользователю, какая информация отображается.

Что мне нужно, так это то, что когда пользователь заходит на страницу, он автоматически начинает прокручивать до областей 1,2,3 и т. Д., Как слайд-шоу.

Можно ли это сделать?

здесь .aspx 

<table style="width: 100%">
    <tr>
        <td style="width: 554px">
        <div id="container">
      <%--  imagenes checks--%>
      <div id="Resultados_Procesos">
      <asp:Image ID="imgProcesos" runat="server" Height="30px" 
     ImageUrl="~/images/check.png" Width="30px"></asp:Image></div>
     <div id="Resultados_Controles">
     <asp:Image ID="imgControles" runat="server" Height="30px" 
     ImageUrl="~/images/check.png" Width="30px"></asp:Image></div>
     <div id="Resultados_Tecnologia">
     <asp:Image ID="imgTecnologia" runat="server" Height="30px" 
     ImageUrl="~/images/check.png" Width="30px"></asp:Image></div>
     <div id="Resultados_LineasCredito">
     <asp:Image ID="imgLineasCredito" runat="server" Height="30px" 
     ImageUrl="~/images/check.png" Width="30px"></asp:Image></div>
     <div id="Resultados_Peopleware">
     <asp:Image ID="imgPeopleware" runat="server" Height="30px" 
     ImageUrl="~/images/check.png" Width="30px"></asp:Image></div>
     <div id="Resultados_Ahorros">
     <asp:Image ID="imgAhorros" runat="server" Height="30px" 
     ImageUrl="~/images/check.png" Width="30px"></asp:Image></div>
     <%-- ImageMap Resultados--%>
        <asp:ImageMap CssClass="rollover" ID="Resultados_Map" runat="server" ImageUrl="~/images/resultados_in.jpg" 
                onclick="ResultadosMap_Click">
            <asp:PolygonHotSpot Coordinates="91,69,93,82,116,85,150,85,131,105,132,126,165,131,171,150,198,163,223,149,229,121,209,101,185,99,172,84,243,85,249,57,104,55" 
                HotSpotMode="PostBack" PostBackValue="Procesos" />
            <asp:PolygonHotSpot Coordinates="353,80,378,90,463,92,451,103,458,116,432,120,414,155,419,168,485,182,488,163,487,131,475,128,473,118,482,105,472,90,528,88,523,63,380,60,356,66" 
                HotSpotMode="PostBack" PostBackValue="Controles" />
            <asp:PolygonHotSpot Coordinates="75,210,81,224,106,228,116,231,111,235,111,271,81,280,98,333,190,308,190,298,210,299,208,242,247,228,247,190,83,190" 
                HotSpotMode="PostBack" PostBackValue="Tecnologia" />
            <asp:PolygonHotSpot Coordinates="344,217,358,225,469,231,429,254,442,292,429,319,526,317,516,291,526,257,481,223,587,222,594,194,349,197" 
                HotSpotMode="PostBack" PostBackValue="LineasCredito" />
            <asp:PolygonHotSpot Coordinates="351,371,385,386,412,398,415,440,513,440,540,383,548,357,360,359" 
                HotSpotMode="PostBack" PostBackValue="Peopleware" />
            <asp:PolygonHotSpot Coordinates="139,393,154,438,196,449,237,427,239,376,195,346,157,356" 
                HotSpotMode="PostBack" PostBackValue="Ahorros" />
            </asp:ImageMap>
    </div>
        </td>
        <td>
            <asp:MultiView ID="MultiView1" runat="server">
                <asp:View ID="Procesos" runat="server">
                    <asp:Image ID="Image1" runat="server" 
                        ImageUrl="~/images/resultados_1_procesos.jpg" />
                </asp:View>
                <asp:View ID="Controles" runat="server">
                    <asp:Image ID="Image2" runat="server" 
                        ImageUrl="~/images/resultados_2_controles.jpg" />
                </asp:View>
                <asp:View ID="Tecnologia" runat="server">
                    <asp:Image ID="Image3" runat="server" 
                        ImageUrl="~/images/resultados_3_tecnologia.jpg" />
                </asp:View>
                <asp:View ID="LineasCredito" runat="server">
                    <asp:Image ID="Image4" runat="server" 
                        ImageUrl="~/images/resultados_4_lineasCredito.jpg" />
                </asp:View>
                <asp:View ID="Peopleware" runat="server">
                    <asp:Image ID="Image5" runat="server" 
                        ImageUrl="~/images/resultados_5_peopleware.jpg" />
                </asp:View>
                <asp:View ID="Ahorros" runat="server">
                    <asp:Image ID="Image6" runat="server" 
                        ImageUrl="~/images/ahorros.jpg" />
                </asp:View>
            </asp:MultiView>
        </td>
    </tr>
</table>

Это .aspx.cs 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class resultados : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
    // Poner la vista inicial en Cero
    MultiView1.ActiveViewIndex = 0;
    imgProcesos.Visible = true;
    imgControles.Visible = false;
    imgTecnologia.Visible = false;
    imgLineasCredito.Visible = false;
    imgPeopleware.Visible = false;
    imgAhorros.Visible = false;
}

protected void ResultadosMap_Click(object sender, ImageMapEventArgs e)
{
    {

        // Cuando se hace clic en la imagen cambia de vista.
        switch (e.PostBackValue)
        {
            case "Procesos":
                MultiView1.ActiveViewIndex = 0;
                //imagenes Clipboard
                imgProcesos.Visible = true;
                imgControles.Visible = false;
                imgTecnologia.Visible = false;
                imgLineasCredito.Visible = false;
                imgPeopleware.Visible = false;
                imgAhorros.Visible = false;
                break;

            case "Controles":
                MultiView1.ActiveViewIndex = 1;
                imgProcesos.Visible = false;
                imgControles.Visible = true;
                imgTecnologia.Visible = false;
                imgLineasCredito.Visible = false;
                imgPeopleware.Visible = false;
                imgAhorros.Visible = false;
                break;

            case "Tecnologia":
                MultiView1.ActiveViewIndex = 2;
                imgProcesos.Visible = false;
                imgControles.Visible = false;
                imgTecnologia.Visible = true;
                imgLineasCredito.Visible = false;
                imgPeopleware.Visible = false;
                imgAhorros.Visible = false;
                break;

            case "LineasCredito":
                MultiView1.ActiveViewIndex = 3;
                imgProcesos.Visible = false;
                imgControles.Visible = false;
                imgTecnologia.Visible = false;
                imgLineasCredito.Visible = true;
                imgPeopleware.Visible = false;
                imgAhorros.Visible = false;
                break;

            case "Peopleware":
                MultiView1.ActiveViewIndex = 4;
                imgProcesos.Visible = false;
                imgControles.Visible = false;
                imgTecnologia.Visible = false;
                imgLineasCredito.Visible = false;
                imgPeopleware.Visible = true;
                imgAhorros.Visible = false;
                break;

            case "Ahorros":
                MultiView1.ActiveViewIndex = 5;
                imgProcesos.Visible = false;
                imgControles.Visible = false;
                imgTecnologia.Visible = false;
                imgLineasCredito.Visible = false;
                imgPeopleware.Visible = false;
                imgAhorros.Visible = true;
                break;
        }
    }
}


}

, и это .css для изображений 

#container {
position:relative;
}

#Resultados_Procesos {
position:absolute;
z-index:1;
left: 90px;
top: 45px;
}

#Resultados_Controles {
position:absolute;
z-index:1;
left: 353px;
top: 55px;
}

#Resultados_Tecnologia {
position:absolute;
z-index:1;
left: 77px;
top: 180px;
}

#Resultados_LineasCredito {
position:absolute;
z-index:1;
left: 345px;
top: 188px;
}

#Resultados_Peopleware {
position:absolute;
z-index:1;
left: 355px;
top: 346px;
}

#Resultados_Ahorros {
position:absolute;
z-index:1;
left: 185px;
top: 350px;
}

#radio_procesos {
position:absolute;
z-index:1;
left: 210px;
top: 471px;
}

#radio_controles {
position:absolute;
z-index:1;
left: 248px;
top: 471px;
}

#radio_tecnologia {
position:absolute;
z-index:1;
left: 286px;
top: 471px;
}

#radio_lineascredito {
position:absolute;
z-index:1;
left: 326px;
top: 471px;
}

#radio_peopleware {
position:absolute;
z-index:1;
left: 364px;
top: 471px;
}

#radio_ahorros {
position:absolute;
z-index:1;
left: 402px;
top: 471px;
}
...