Mapas en HTML

[aabramovichq]

como puedo hacer mapas de este tipo, que no sea con swf

[URL="http://www.fotocasa.es/search/search_maps.aspx?mi=11&tti=1&bti=2&pbti=2&ci=724&l l1i=1&ll2i=11&opi=38&cu=es-ES"]http://www.fotocasa.es/search/search_maps.aspx?mi=11&tti=1&bti=2&pbti=2&ci=724&l l1i=1&ll2i=11&opi=38&cu=es-ES[/URL]

desde ya gracias

[Carlangueitor]

Lo puedes hacer con mapas de imágenes y un poco de javascript.

Saludos

[joseomaker]

puedes hacerlo facilmente con GIMP que es como photoshop pero en mi opinion es mejor para diseñar webs,aca te dejo el tutorial:

http://docs.google.com/Doc?id=dhs3vfzq_1786db5m72ds

el tutorial es propiedad de joaclint istgud.

PD: esta explicado con GIMP y Kompozer pero puedes hacer lo mismo con GIMP y notepad++,Gimp y Dreamweaver,etc.

[caricatos]

Hola:

Con imágenes planas, también se puede hacer online: Capturar áreas en imágenes

Saludos

[Ami]

Hola aabramovichq

No especificas si quieres aprender a construir el mapa o simplemente lo quieres hacer. Si es lo último se me vinieron a la mente dos programas que te pueden servir, ambos gratuitos:

Handy ImageMapper 1.5
http://www.brothersoft.com/handy-imagemapper-46119.html

Image Mapper
http://www.tomaweb.com/image-mapper.asp

[aabramovichq]

Gracias a todos, ya tengo hecho el mapa en photoshop, lo q kiero lograr es, el mismo efecto al hacer el mousehover, intente hacer con jquery e imagenes png, no funciona porq se sobreponen las imagenes, desde gracias a todos.

[joseomaker]

busca un modulo ya hecho en JQuery,ahi muchos y deben haber con efecto mousehover

[juporag]

En esta página encuentras un mapa parecido.
[URL="http://www.restaurantesvegetarianos.es/content/view/311/296/"]http://www.restaurantesvegetarianos.es/content/view/311/296/[/URL]
Tiene que haber la imagen general como fondo y por la funcion swapImage vas cambiando la imagen Image1, deben ser de fondo transparente

Código HTML:

<div background="imagen general">

<img src="imagen que cambia" name="Image1" width="400" height="360" border="0" usemap="#MapMapMapMap" id="Image1" />
</div> 

Código HTML:

<map name="MapMapMapMap" id="Map222">
<area shape="poly" coords="coordenadas del mapa" href="#" alt="gibraltar" onMouseOver="MM_swapImage('Image1','','mapa de gibralata" onMouseOut="MM_swapImgRestore()" /> 

funcion swapImage

Código HTML:

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

[caricatos]

Hola:

Evidentemente no has mirado todos los mensajes... y de todos modos, ¿porqué piensas que con jquery iba ser mejor que "sin librerías"?...

Saludos

[joseomaker]

Depende caricatos,toma en cuenta que si bien seria un poco mas lento con JQuery y mas complicadode hacer,se le podrian agregar muchos mas efectos que con HTML o xhtml y css.

PD:se me vino a la mente que podrias hacerlo con CSS y podrias poner un que otro efecto como si fuera un menu CSS,se cargaria mas rapido.

[caricatos]

Iniciado por joseomaker

Depende caricatos,toma en cuenta que si bien seria un poco mas lento con JQuery y mas complicadode hacer,se le podrian agregar muchos mas efectos que con HTML o xhtml y css.

PD:se me vino a la mente que podrias hacerlo con CSS y podrias poner un que otro efecto como si fuera un menu CSS,se cargaria mas rapido.

Parece que tampoco has visto el enlace en mi mensaje, y es que lo que se pide es un simple rollover, y dudo que una librería pueda ponerle muchos efectos a un simple rollover... incluso de quererlo, jquery es una librería javascript, y lo que se quiera hacer con una librería, sería posible hacerlo solo con javascript (el eterno dilema)... de todos modos, te comento que en mi enlace, se genera automáticamente tanto los elementos (las imágenes para reemplazar) como el código (sin más condiciones que la imagen sea con colores planos, que con cualquier editor gráfico puede conseguirse)...

Bueno, siempre dependerá que se miren las respuestas y que realmente se consideren.

Saludos

[joseomaker]

entiendo,ya verifique el enlace y la verdad no me gusto mucho,para mi sigue siendo mas simple con Gimp,pero cada quien tiene sus gustos,no debatire cual es el mejor metodo.

Dejemos que aabramovichq sea el que decida cual es el metodo que usara.

Saludos

[caricatos]

Hola:

Aunque no te guste, el comparar una página (y complementarias, y demás...) escrita por mi, línea por línea (con sus copy and paste en ocasiones) en el block de notas con toda una aplicación de las que suelo aconsejar (aunque prefiero photoshop, que su versión "elements" ha sido accesible para mi bolsillo, y por lo tanto uso...), me parece todo un halago... lamentablemente no tengo tiempo para documentar la página mejor, pero si se pincha en los sitios correctos, y no se cometen errores, (además de que realmente se usen colores planos), creo que los resultados serían los mismos.

Saludos

[caricatos]

Hola:

Por cierto, la página original estaba en otro dominio: Capturar áreas en imágenes.

Últimamente tenía problemas en el servidor, que parece que ya se han resuelto (no lo verán, pero tengo los dedos cruzados )

Saludos