Erik Erik - 2 months ago 10
HTML Question

Anchor tag works only in firefox

on my page I have a box named "okno1" with some text in it and on mouseover, a picture appears istead of that text, after cca 5sec text returns. The problem is, that the whole box "okno1" should be a link to another page, which works in in firefox. i Tried it like:

<a href=".." target="_blank">
<okno1 id="okno1" onMouseOver="zobraz1();"> ... </okno1>
</a>


after this i tried js:

<okno1 id="okno1" onclick="nahrejodkaz('....');" onMouseOver="zobraz1();"> .... </okno1>

function nahrejodkaz(url) {
window.open(url, "_blank");
}


Both work only in firefox. Is there some way, how it could work in chrome and IE?

JS:

function zrus1() {
document.getElementById("okno1").innerHTML ='CYKLOPRŮVODCE
<br>Cyklistika';
}

function zobraz1(){
var doba=3000;
document.getElementById("okno1").innerHTML = '<img src="kolo.jpg"
alt="Cyklistika" name="img">';
window.setTimeout('zrus1();',doba);
}


CSS

okno1 {
display: inline-block;
cursor: pointer;
position: relative;
float: left;
width: 17%;
}

Answer

This seems to do the trick. I didn't bother to chase-down why exactly your attempt was failing. Differences include (0) attaching event handlers instead of using inline JS (1) removing the mouseover handler for the okno1 element for the 5s period it has its content changed.

Works with Chrome, IE 11.Chrome displays the parent folder in the browser window, IE opens it in an Explorer window.

function byId(id){return document.getElementById(id);}

window.addEventListener('load', onDocLoaded, false);

function onDocLoaded(evt)
{
    var okno1 = document.registerElement('okno-1'); // okno1 is an invalid tag-name
	byId('okno1').addEventListener('mouseover', onMouseOver, false);
}

function onMouseOver(evt)
{
	this.removeEventListener('mouseover', onMouseOver);
	this.innerHTML = "<img src='kolo.jpg' alt='Cyklistika' name='img'>";

	window.setTimeout(onTimerElapsed, 5000);
}

function onTimerElapsed(evt)
{
	var tgt = byId('okno1');
	tgt.innerHTML = ' ...  ';
	tgt.addEventListener('mouseover', onMouseOver, false);
}
okno-1
{
    display: inline-block;
    cursor: pointer;
    position: relative;
    float: left;
    width: 17%;
}
<a href=".." target="_blank"><okno-1 id="okno1"> ...  </okno-1></a>