• Viernes 8 de Noviembre de 2024, 15:33
« anterior próximo »
Páginas: [1]

Autor Tema:  imagemap que ocupe siempre el acho de la pantalla  (Leído 5499 veces)

Johana84

  • Nuevo Miembro
  • *
  • Mensajes: 16
    • Ver Perfil
imagemap que ocupe siempre el acho de la pantalla
« en: Miércoles 2 de Junio de 2010, 23:58 »
0
Hola a todos
Los estoy convocando porque no se como hacer lo siguiente:

 Tengo un asp:imagemap como banner en la parte de arriba de la página, y me gustaría que ocupe todo el ancho de navegador, redimensionándose para seguir ocupando todo el ancho de la pantalla cuando se achique o se agrande la ventana del navegador, sin que las coordenadas del imagemap se pierdan cuando vea mi pagina en una pantalla mas grande.

este es el codigo que tengo:

Código: Text
  1. <div runat="server" id="imagen" style="width: 100%">
  2.   <asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="Images/ima_home
  3.           /L2_Cabezote17.gif" CssClass="TablaFila" HotSpotMode="Navigate" Height="76px"
  4.           Width="100%">
  5.         <asp:RectangleHotSpot Top="32" Bottom="73" Left="339" Right="306"
  6.                 NavigateUrl="~/Default.aspx" HotSpotMode="Navigate" />
  7.  
  8.         <asp:RectangleHotSpot Top="32" Bottom="73" Left="340" Right="384"
  9.                 NavigateUrl="~/Cart.aspx" HotSpotMode="Navigate" />
  10.  
  11.         <asp:RectangleHotSpot Top="32" Bottom="73" Left="385" Right="419"
  12.                NavigateUrl="~/Checkout/Default.aspx" HotSpotMode="Navigate"/>
  13.  
  14.         <asp:RectangleHotSpot Top="32" Bottom="73" Left="463" Right="422"
  15.              NavigateUrl="~/Profile/Default.aspx" HotSpotMode="Navigate" />
  16.  
  17.         <asp:RectangleHotSpot Top="32" Bottom="73" Left="510" Right="465"
  18.             NavigateUrl="~/Contact.aspx" HotSpotMode="Navigate" />
  19.  
  20.         <asp:RectangleHotSpot Top="32" Bottom="73" Left="512" Right="546"
  21.              NavigateUrl="~/HelpUser.aspx" HotSpotMode="Navigate"/>
  22.     </asp:ImageMap>
  23.  </div>
  24.  

Alguien sabe como puedo hacer esto?

Muchas gracias

Johana

Jeysscarr

  • Miembro MUY activo
  • ***
  • Mensajes: 134
  • Nacionalidad: co
    • Ver Perfil
Re: imagemap que ocupe siempre el acho de la pantalla
« Respuesta #1 en: Jueves 3 de Junio de 2010, 00:27 »
0
Con codigo C# o VB en el evento load de la pagina:
Calcular el ancho de la pantalla con algo como: ImageMap.Width=My.Computer.Screen.With; para VB
Esto variaria del lenguaje con el que trabajes los metodos y eventos.

Para hacerlo sin C# o VB, tienes dos opciones:
1. Dejar todas las dimensiones del banner como absolutas, que ninguna tenga medidas especificas en Pixeles sino en porcentaje.
2. Crearlo de un tamaño especifico y que quede centrado en la página (Más sencillo)
Nuestro poder está creciendo mas rápido que nuestra sabiduria

Jeysscarr

  • Miembro MUY activo
  • ***
  • Mensajes: 134
  • Nacionalidad: co
    • Ver Perfil
Re: imagemap que ocupe siempre el acho de la pantalla
« Respuesta #2 en: Jueves 3 de Junio de 2010, 00:33 »
0
Aca de tejo un enlace acerca de como manejar la resolucion en Asp.net si el lenguaje es C#, si usas VB arriba es el codigo que te sirve:
http://www.c-sharpcorner.com/UploadFile/Joshy_geo/changescreenresolution10102006112110AM/changescreenresolution.aspx
Nuestro poder está creciendo mas rápido que nuestra sabiduria

Johana84

  • Nuevo Miembro
  • *
  • Mensajes: 16
    • Ver Perfil
Re: imagemap que ocupe siempre el acho de la pantalla
« Respuesta #3 en: Jueves 3 de Junio de 2010, 15:37 »
0
Hola

muchas gracias por contestarme, voy a probar tus consejos y te cuento como me fue.

Gracias

Johana

Johana84

  • Nuevo Miembro
  • *
  • Mensajes: 16
    • Ver Perfil
Re: imagemap que ocupe siempre el acho de la pantalla
« Respuesta #4 en: Jueves 3 de Junio de 2010, 23:14 »
0
Hola

Los consejos que me proporcionaste aplican si tengo mi panel superior de mi página dividido de la forma como esta en el archivo adjunto?
[attachment=0:2vkt8h25]panel.JPG[/attachment:2vkt8h25],
las medidas que tiene cada una de las imagenes son:
El logo de la empresa mide 151*120
la imagen del imagemap mide 826*76

El problema que tengo es que cuando miro mi página en una pantalla de 15" me ocupa todo el espacio de la pantalla, pero si la miro en una pantalla de 17" no me abarca toda la pantalla la imagen no se redimensiona, luego encontre que debia poner el ancho y alto al 100%, pero me pasa que las coordenadas de los link que debe tener el imagemap se corren y la imagen se me distorsiona un poco.

Estuve tratando de utilizar los consejos que me proporcionaste pero el número 1 me salen errores.

Podrias ayudarme por favor

Gracias

Johana
El mensaje contiene 1 archivo adjunto. Debes ingresar o registrarte para poder verlo y descargarlo.

Jeysscarr

  • Miembro MUY activo
  • ***
  • Mensajes: 134
  • Nacionalidad: co
    • Ver Perfil
Re: imagemap que ocupe siempre el acho de la pantalla
« Respuesta #5 en: Viernes 4 de Junio de 2010, 14:24 »
0
Hice una página con el mismo tipo de estructura superior que muestras en la imágen y efectivamente me impide manejar las coordenadas con facilidad, entonces lo solucione sacando esa "estructura de tres partes" como la tuya, de todas las etiquetas <div> y <form> que habian, ubicandola en la parte superior de la pantalla como algo independiente de las demás partes de la página

para lo de la imágen que se distorsiona la solucion es crear la misma imágen pero de 1600 pixeles y establecer que la forma de adaptación de la imágen no sea que se estreche para caber en el contenedor, sino que sea de forma libre. Otra forma puede ser que si la imágen que se debe agrandar tiene un color uniforme de fondo, poner el mismo color como el color de fondo del contenedor en el que se encuentra y como antes no dejar que la imágen se adapte al nuevo tamaño, sino que se muestre en el tamaño original, para eso, estableces los pixeles como fijos.

Te dejo unas imágenes para que veas como lo solucioné, Esto depende de en qué etiqueta tienes alojada tu estructura, espero que te funcione
El mensaje contiene 2 archivos adjuntos. Debes ingresar o registrarte para poder verlos y descargarlos.
Nuestro poder está creciendo mas rápido que nuestra sabiduria

Johana84

  • Nuevo Miembro
  • *
  • Mensajes: 16
    • Ver Perfil
Re: imagemap que ocupe siempre el acho de la pantalla
« Respuesta #6 en: Martes 8 de Junio de 2010, 19:07 »
0
Hola

sacando esa "estructura de tres partes"  de todas las etiquetas <div> y <form> que tengo, y ubicandola en la parte superior de la pantalla como algo independiente de las demás partes de la página me genera un error debido al contenido que tiene el asp:panel que es el siguiente:

Código: Text
  1. <asp:Panel ID="Search" runat="server" DefaultButton="SearchButton" HorizontalAlign="Right" Width="100%"><span class="CeldaBarra2" style="font-weight: bold; color: #2F5F00;">TEXTO A BUSCAR<br></span>
  2.  <asp:TextBox ID="SearchTextBox" runat="server" CssClass="text"
  3.    MaxLength="128"   Width="240px" />
  4.  <asp:Button ID="SearchButton" CssClass="Buscar" runat="server"
  5.    UseSubmitBehavior="false"  PostBackUrl="~/Search.aspx"
  6.     OnClick="SearchButton_Click"/>
  7. </asp:Panel>
  8.  

mirando la imagenes que me proporcionaste como ejemplo, las mias tienes una variación ya que los link van es en la imagen que tiene el imagemap asi:[attachment=1:3knzhshr]panel1.JPG[/attachment:3knzhshr]

Este es un ejemplo de la imagen que va en el imagemap, como podras observar no es una imagen con un fondo de un solo tono:
[attachment=0:3knzhshr]cabeza_r1_c4.gif[/attachment:3knzhshr]

y este es el codigo que tengo en el archivo .master:

Código: Text
  1. [size=85]<body class="<%= PageContext.Current.PageGroup %>">    
  2.     <form id="form1" runat="server">
  3.         <asp:SiteMapDataSource runat="server"
  4.       ID="SiteMapDataSource" StartFromCurrentNode="false"
  5.         StartingNodeUrl="~/Browse.aspx"
  6.        ShowStartingNode="false" SiteMapProvider="SiteMap" />
  7.  
  8.         <div runat="server" id="container">
  9.           <div runat="server" id="banner"
  10.             style="background-color: #FFFFFF; width: 100%;">
  11.          <table cellpadding="0" cellspacing="0"
  12.               class="TablaRegistro" width="100%">
  13.            <tr>
  14.              <td rowspan="2" class="ImageCell" valign="top">
  15.                 <div runat="server" id="branding"
  16.                       class="TablaFila">
  17.                   <asp:HyperLink ID="HyperLink6"
  18.                     runat="server" CssClass="TablaFila"
  19.                      NavigateUrl="~/">Tienda</asp:HyperLink>
  20.                 </div>
  21.             </td>
  22.             <td valign="top" class="ImageCell" width="100%"
  23.                 height="100%">
  24.                <div runat="server" id="imagen">
  25.                  <asp:ImageMap ID="ImageMap" runat="server"
  26.                     ImageUrl="Images/ima_home/L2_Cabezote17.gif"
  27.                     CssClass="TablaFila"
  28.                      HotSpotMode="Navigate"
  29.                      Height="76px" Width="100%">
  30.  
  31.                   <asp:RectangleHotSpot Top="32" Bottom="73"
  32.                       Left="339" Right="306"
  33.                       NavigateUrl="~/Default.aspx"
  34.                       HotSpotMode="Navigate" />
  35.  
  36.                  <asp:RectangleHotSpot Top="32" Bottom="73"
  37.                      Left="340" Right="384"
  38.                      NavigateUrl="~/Cart.aspx"
  39.                      HotSpotMode="Navigate" />
  40.  
  41.                  <asp:RectangleHotSpot Top="32" Bottom="73"
  42.                     Left="385" Right="419"
  43.                     NavigateUrl="~/Checkout/Default.aspx"
  44.                     HotSpotMode="Navigate"/>
  45.  
  46.                 <asp:RectangleHotSpot Top="32" Bottom="73"
  47.                     Left="463" Right="422"
  48.                     NavigateUrl="~/Profile/Default.aspx"
  49.                     HotSpotMode="Navigate" />
  50.  
  51.                <asp:RectangleHotSpot Top="32" Bottom="73"
  52.                    Left="510" Right="465"
  53.                    NavigateUrl="~/Contact.aspx"
  54.                    HotSpotMode="Navigate" />
  55.  
  56.               <asp:RectangleHotSpot Top="32" Bottom="73"
  57.                    Left="512" Right="546"
  58.                    NavigateUrl="~/HelpUser.aspx"
  59.                    HotSpotMode="Navigate"/>
  60.             </asp:ImageMap>
  61.           </div>  
  62.         </td>
  63.       </tr>
  64.       <tr>
  65.        <td>
  66.            <table cellpadding="0" cellspacing="0">
  67.               <tr bgcolor="#C1DF3B">
  68.                 <td colspan="15" valign="top" class="CeldaBarra">
  69.                   <asp:Image ID="Barraverde" runat="server"
  70.                     ImageUrl="Images/ima_home/barra_verde_peq.gif"
  71.                     Width="75px" Height="6px"
  72.                     ImageAlign="Top" CssClass="TablaFila"/>  
  73.                 </td>
  74.                 <td class="CeldaBarra">
  75.                    <asp:Panel ID="Search" runat="server"
  76.                       DefaultButton="SearchButton"
  77.                       HorizontalAlign="Right" Width="100%">
  78.                      <span class="CeldaBarra2"
  79.                        style="font-weight: bold;
  80.                        color: #2F5F00;">TEXTO A BUSCAR<br>
  81.                     </span>
  82.                    <asp:TextBox ID="SearchTextBox"
  83.                       runat="server" CssClass="text"
  84.                       MaxLength="128" Width="240px" />
  85.  
  86.                    <asp:Button ID="SearchButton"
  87.                      CssClass="Buscar" runat="server"
  88.                      UseSubmitBehavior="false"
  89.                      PostBackUrl="~/Search.aspx"
  90.                      OnClick="SearchButton_Click"/>
  91.                  </asp:Panel>  
  92.               </td>
  93.               <td><asp:Image ID="Image4" runat="server"
  94.                       ImageUrl="~/Images/ima_home/flecha_roja.gif"
  95.                       Width="9px" Height="9px"
  96.                       CssClass="TablaFila" />
  97.              </td>
  98.  
  99.              <td><asp:HyperLink ID="HyperLink4"
  100.                       runat="server" NavigateUrl="">
  101.                       <span style="color: #D60C21;
  102.                         font-size: 9px" >Búsqueda<br />Avanzada</span>
  103.                    </asp:HyperLink>
  104.             </td>
  105.           </tr>
  106.         </table>
  107.       </td>
  108.      </tr>
  109.     </table>
  110.   </div>
  111.  
  112.  

Podrias entonces decirme como hago entonces, si me puedes poner el codigo de ejemplo mucho mejor.

Gracias

Johana
El mensaje contiene 2 archivos adjuntos. Debes ingresar o registrarte para poder verlos y descargarlos.

Jeysscarr

  • Miembro MUY activo
  • ***
  • Mensajes: 134
  • Nacionalidad: co
    • Ver Perfil
Re: imagemap que ocupe siempre el acho de la pantalla
« Respuesta #7 en: Martes 8 de Junio de 2010, 20:36 »
0
Hola joha, la imagen que use tampoco es de un tono especifico, era una sugerencia por si se daba el caso, en mi caso no hice nada complicado, solo especificar un "formulario" para los botones y controles que van en la parte sup y otro para los del cuerpo de la pagina... en realidad no hay truco, el codigo te lo pongo cuando llegue a mi casa, estoy inthe Work.. que pases un buen dia
Nuestro poder está creciendo mas rápido que nuestra sabiduria

Johana84

  • Nuevo Miembro
  • *
  • Mensajes: 16
    • Ver Perfil
Re: imagemap que ocupe siempre el acho de la pantalla
« Respuesta #8 en: Jueves 10 de Junio de 2010, 15:54 »
0
Hola
Muchas gracias por tu ayuda, esperare entonces el ejemplo de codigo.

Gracias
Johana

Johana84

  • Nuevo Miembro
  • *
  • Mensajes: 16
    • Ver Perfil
Re: imagemap que ocupe siempre el acho de la pantalla
« Respuesta #9 en: Viernes 11 de Junio de 2010, 23:35 »
0
Hola Jeysscarr

Me ayudaria mucho si me puedes proporcionar el ejemplo, para poder solucionar el problema con las imagenes, muchas gracias de antemano por toda la ayuda brindada.

Atte

Johana

Johana84

  • Nuevo Miembro
  • *
  • Mensajes: 16
    • Ver Perfil
Re: imagemap que ocupe siempre el acho de la pantalla
« Respuesta #10 en: Jueves 17 de Junio de 2010, 16:23 »
0
Hola

Que pena molestarte tanto, pero es que no he podido solucionar el problema de las coordenadas del imagemap, por favor podrias enviarme el ejemplo de codigo para guiarme y poder solucionar el problema.

Muchas gracias

Johana

Johana84

  • Nuevo Miembro
  • *
  • Mensajes: 16
    • Ver Perfil
Re: imagemap que ocupe siempre el acho de la pantalla
« Respuesta #11 en: Miércoles 25 de Agosto de 2010, 19:06 »
0
Hola Jeysscar

Por favor cuando puedas enviame el ejemplo, necesito solucionar mi problema.

Gracias
Johana
Páginas: [1]
« anterior próximo »