casi tengo terminado este script necesito ayuda

[rufus]

saludos..

siguiendo un libro que tengo de javascript he hecho un script con unas imagenes de un mapa de españa en el que hay señaladas varias ciudades cuando se pincha en las zonas donde estan las ciudades se me abre una pagina....

pero yo lo que quiero es cuando pinche en las imagenes me salga un cuadro de dialogo o una pagina independiente de pequeño tamaño donde poner un texto relacionado con la ciudad en la que se a pinchado.

como se hace esto en javascript... si alguien lo necesita pongo el codigo.

[Legoltaz]

Para cuadros de diálogo tienes: alert(), confirm() y prompt().
Para abrir una nueva ventana personalizada (popup): window.open();

[rufus]

como meto el codigo de la funcion windows.open() lo digo para meterle texto y puede ke alguna imagen????? se hace en el head, pero ahi le meto el texto o tengo ke relacionar la funcion con codigo en el body???

este es el codigo del head ke e usado....

<script type="text/javascript">
function loadconst() {
var areas = document.getElementsByTagName("area");
for (var i = 0; i < areas.length; i++) {
areas[i].onmouseover = mouseOver;
areas[i].onmouseout = mouseOut;
}
}
function mouseOver() {
document.getElementById("MAPA").src = "MAPA_map_" + this.id + ".gif";
}

function mouseOut() {
document.getElementById("MAPA").src = "MAPA_MAP_DEFAULT.gif";
}

</script>

[Legoltaz]

La estructura del popup es: window.open(URL,name,specs,replace)

Más información: http://www.w3schools.com/HTMLDOM/met_win_open.asp

[rufus]

gracias colega XD

[rufus]

ya e conseguido que cuando pulso encima de la ciudad del mapa se me abra una nueva ventana en el mozilla a una web externa pero como tengo que modificar el codigo javascript para que se me abra una vetana pequeña digamos de 200px de ancho y 200 de alto para cada ciudad??? como se hace esto con javascript.

este es el codigo que tengo:

javascript:

Código:

<script type="text/javascript">
function loadconst() {
var areas = document.getElementsByTagName("area");
for (var i = 0; i < areas.length; i++) {
    areas[i].onmouseover = mouseOver;
    areas[i].onmouseout = mouseOut;
}
}
function mouseOver() {
    document.getElementById("MAPA").src = "MAPA_map_" + this.id + ".gif";
}

function mouseOut() {
    document.getElementById("MAPA").src = "MAPA_MAP_DEFAULT.gif";
}

function open_win()
{
window.open("http://www.marca.com") //e puesto esta web por poner una para probar el codigo //
}

</script>

html:

Código:

<div id="mapa">

	 <img src="imagenes/MAPA_MAP_DEFAULT.GIF" alt="ESPAÑA" name="MAPAGIF" width="239" height="164" useMap = "#MAP"  isMap id="MAPAGIF"></p>

<p><map name = "MAP">
<area id="malaga" coords="84,122,110,156" alt="Draco" shape="RECT" onclick="open_win()" />

<area id="barcelona" coords="153,67,189,100" alt="Draco" shape="RECT" href="http://en.wikipedia.org/wiki/Draco">

<area id="malaga" coords="63,41,121,86" alt="Draco" shape="RECT" href="http://en.wikipedia.org/wiki/Draco">

<area id="madrid" coords="162,35,229,57" alt="Ursa Minor" shape="RECT" href="http://en.wikipedia.org/wiki/Ursa_Minor">
</map>

[djaevi]

Y porque si lo que queres es poner informacion de la ciudad no haces algun div que este invisible y cuando le haces mouseover se pone en visible y en mouseout lo volves a esconder? a los divs le podes poner el tamaño formato y lo que sea con los css, salvo que lo que quieras es abrir otra web si o si ahi ya no te servirian...

[rufus]

si, es que lo que quiero, es abrir una ventana nueva pero pequeña.

he pensado en utilizar un switch para hacer esto, pero no se como enlazarlo con la primera funcion la del mouseover y el mouseout, pongo el codigo como lo tengo ahora:

Código:

<script type="text/javascript">
function loadconst() {
var areas = document.getElementsByTagName("area");
for (var i = 0; i < areas.length; i++) {
    areas[i].onmouseover = mouseOver;
    areas[i].onmouseout = mouseOut;
}

function mouseOver() {
    document.getElementById("MAPA").src = "MAPA_map_" + this.id + ".gif";
}

function mouseOut() {
    document.getElementById("MAPA").src = "MAPA_MAP_DEFAULT.gif";
}

function open_win()
{
var areas = document.getElementsByTagName("area");

switch (area) {
case "malaga":
window.open("http://www.gjhgjhg.com")
break;

case "barcelona":
window.open("http://www.jojjojok.com")
break;

case "valencia":
window.open("http://www.kkhkhk.com")
break;

case "madrid":
window.open("http://www.jhjhj.com")
break;

}
}

[djaevi]

No entiendo bien lo que queres hacer con el mouseover con el tema de que las ventanas sean pequeñas le tenes que pasar los 2 parametros que restan a la funcion window open ejemplo:

Código PHP:

  window.open('direccion url','_blank','width=100,height=100');  
   

y creo que en ves de un switch directamente como usas on click podrias poner algo asi

Código PHP:

  function obtenerId(id) {
var ruta = "h ttp://w ww." + id + ".com";
window.open(ruta,'_blank','width=100,height=100');
}  
   

Código HTML:

<area id="malaga" onclick="obtenerId(this.id)"> 

es un ejemplo simplificado despues tendrias que adaptarlo.

Saludos

[djaevi]

Iniciado por djaevi

No entiendo bien lo que queres hacer con el mouseover con el tema de que las ventanas sean pequeñas le tenes que pasar los 2 parametros que restan a la funcion window open ejemplo:

Código PHP:

  window.open('direccion url','_blank','width=100,height=100');  
   

y creo que en ves de un switch directamente como usas on click podrias poner algo asi

Código PHP:

  function obtenerId(id) { 
var ruta = "h ttp://w ww." + id + ".com"; 
window.open(ruta,'_blank','width=100,height=100'); 
}  
   

Código HTML:

<area id="malaga" onclick="obtenerId(this.id)"> 

PD: uni el h ttp y el w ww los separe porque no me deja postear links

es un ejemplo simplificado despues tendrias que adaptarlo.

Saludos

[rufus]

no lo consigo con el codigo ke me as pasado...no se como adaptarlo.......me lo puedes explicar mejor??? gracias

[djaevi]

Porque no usas sino en el area otro parametro como por ejemplo name para pasar el nombre de la direccion web? ejemplo

Código PHP:

  function hacerPopup(name) { 
window.open(name,'_blank','width=100,height=100'); 
}  
   

Código HTML:

<area id="malaga" name="htt p://w ww.miweb.com" onclick="hacerPopup(this.name)"> 

la funcion hacerPopup recibe un parametro que se va a usar como direccion URL en la funcion window open, y este parametro va a ser el nombre de cada area ya que al clickear sobre un area envia el valor this.name osea en tu caso el link a la pagina de esa area. Cualquier cosa avisame...

Saludos

[rufus]

ke va .. no me funciona ahora si e entendido bien tu codigo y lo e insertado bien pero sigue sin funcionar ke raro............y otra cosa yo kiero relacionar varias imagenes con varias ciudades asi ke como hay ke modificar el codigo para ke maneje todas las ciudades?

[rufus]

sigue sin salirme..por favor alguien ke me ayude....por mas ke pienso y modifico el codigo no me funciona en nada......

[rufus]

ya casi e conseguido lo ke keria hacer..este es el codigo ke estoy usando ahora:

Código:

<script type="text/javascript">

function openWin()
{
myWindow=window.open('','','width=400,height=200');
myWindow.document.write("oficina malaga: telefono de contacto 952xxx");
myWindow.focus();
}

</script>

<script type="text/javascript">
function openVentana()
{
myWindow=window.open('','','width=400,height=200');
myWindow.document.write("oficina malaga: telefono de contacto 952xxx");
myWindow.focus();
}
</script>

<script type="text/javascript">
function openCiudad()
{
myWindow=window.open('','','width=400,height=200');
myWindow.document.write("oficina malaga: telefono de contacto 952xxx");
myWindow.focus();
}
</script>

<script type="text/javascript">
function openBarsa()
{
myWindow=window.open('','','width=400,height=200');
myWindow.document.write("oficina malaga: telefono de contacto 952xxx");
myWindow.focus();
}
</script>

<script type="text/javascript">
function loadconst() {
var areas = document.getElementsByTagName("area");
var miArray = new Array(4) 

miArray[0] = "www.terra.es";
miArray[1] = "www.facebook.com";
miArray[2] = "www.todocvcd.com";
miArray[3] = "www.cocacola.es";

for (var i = 0; i < areas.length; i++) {
    areas[i].onmouseover = mouseOver;
    areas[i].onmouseout = mouseOut;
	areas[i].onclick= onClick;
}

function mouseOver() {
    document.getElementById("MAPA").src = "MAPA_map_" + this.id + ".gif";
	
}
}
function mouseOut() {
    document.getElementById("MAPA").src = "MAPA_MAP_DEFAULT.gif";
}

}

</script>

Código:

<div id="mapa">
	 <img src="imagenes/MAPA_MAP_DEFAULT.GIF" alt="ESPAÑA" name="MAPAGIF" width="239" height="164" useMap = "#MAP"  isMap id="MAPAGIF"></p>
	 
<p><map name = "MAP">

<area id="malaga" coords="23,128,162,161" alt="Draco"   shape="RECT" onclick="openWin()"/>

<area id="valencia" coords="153,67,189,100" alt="Draco" shape="RECT" onclick="openVentana()"/>

<area id="madrid" coords="63,41,121,86" alt="Draco" shape="RECT" onclick="openCiudad()"/>

<area id="barcelona" coords="159,34,226,56" alt="Ursa Minor" shape="RECT" onclick="openBarsa()"/>

</map>

Como hago ahora, para darle formato a las ventanas nuevas ke se me abren? es decir un poco de maquetacion????

[rufus]

saludos:

este script me da error en una linea este es el error que me da:

missing; before statement.

haber si alguien me puede ayudar.........

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>search</title>

    <script type="text/javascript">
var requestObj = readyAJAX();
var url ="http://www.hotmail.com";
requestObj.open("GET", url,true);
requestObj.send();
var AJAXresponse;
requestObj.onreadsystatechange= function() {
    if (requestObj.readyState == 4) {
        if (requestObj.status == 200){
            AJAxresponse =requestObj.responseXML;
            listName("");
        }else {
            alert(requestObj.statusText);
        }
    }
}

if (windows.attachEvent){
    document.getElementById("textname").attachEvent("onkeyup" ,
    textsearch);
}
else {
    document.getElementById("textname").addEventListener("keyup",
    textsearch,false);
}

function textsearch(){
    var textName = document.getElementById("textname");
    var dataNode = document.getElementById("data");
    while (dataNode.removeChildNodes()){
        dataNode.removeChild(dataNode.firstChild);

    }
    listName(textName.value);

function listName(text) {
    var xmlEl = AJAXresponse.getElementsByTagName("bookmark");
    for (i = 0; i< xmlEl.length; i++){
        var div = document.createElement("div");
        //create the row elements
        for (j = 0; j < xmlEl[i].chilNodes.length; j++){
            //skip it if the ype is not 1
            if (xmlEl[i].childNodes[j].nodeType != 1){
                    continue;

            }

    var url = new RegExp("http");
    if ( ! xmlEl[i].childNodes[j].firstChild.nodeValue.match(url)){
        var pattern ="^" + text;
        var title = xmlEl[i].childNodes[j].firstChild.nodeValue;
        var nameRegexp = new ReExp(pattern, "i");
        var existDiv = document.getElementById(title);
        if (! existDiv){
            if (title.match(nameRegexp)){
                var anchor = document.createElement("a");
//aqui da el error
                var xmlData = document.createTextNode(xmlEl[i]).

                    childNodes[j].firstChild. nodeValue);
                 //

                var urls = AJAXresponse.getElementsByTagName("url");
                anchor.setAttribute("href", urls[i].firstChild.nodeValue);
                anchor.appendChild(xmlData);
                div.appendChild(anchor);

            }
        }
    }

    }
document.getElementsById("data").appendChild(div);
    }
}
</script>
    </head>
    <body>
    <form name="nameform" id="nameform" action="" method="post">
    Bookmark search: <input id="textname" type="text" name="textname">
    </form>



    </body>
</html>