navigační lišta

JavaScript:

function convert($cislice) {

document.getElementById('cislice1').src='cislice1.gif';

document.getElementById('cislice2').src='cislice2.gif';

document.getElementById('cislice3').src='cislice3.gif';



document.getElementById($cislice).src=$cislice + '_hover.gif';

}

HTML:

<img src="cislice1.gif" id="cislice1" onclick="convert("cislice1")" />

<img src="cislice2.gif" id="cislice2" onclick="convert("cislice2")" />

<img src="cislice2.gif" id="cislice3" onclick="convert("cislice2")" />

Na JavaScript jsem lama, takže si nejsem jistý funkčností. Taky se mi to zdá jako dost těžkopádné řešení.

Update: K tomuto řešení jsou potřeba tři obrázky ve formátu "cisliceX.gif" a tři ve formátu "cisliceX_active.gif", které představují aktivní číslice.

Charlie Update nejspíš asi "cisliceX_hover.gif"


DZer Jestli máš těch obrázků na vyměňování hodně, můžeš to udělat čistěji, tak že oddělíš js od html. Jediné co budeš potřebovat navíc je někam dát id="jshelp" (můžeš ho pověsit klidně na body) a již zmíněné obrázky s příponou "_hover.gif". Script by pak mohl vypadat nějak takhle:

<script type="text/javascript">
<!--
function hover(){
var div=document.getElementById('jshelp')
var obr=div.getElementsByTagName('img');
for (var i=0;i<obr.length;i++) {
var hover=obr[i].getAttribute('src');
hover=hover.replace(new RegExp(".gif","g"), "_hover.gif");
obr[i].setAttribute('rel',hover);
obr[i].onmouseover=function(){
var vemsi=this.getAttribute('rel');
this.setAttribute('src',vemsi);
}
obr[i].onmouseout=function(){
var vemsi=this.getAttribute('rel');
vemsi=vemsi.replace(new RegExp("_hover.gif","g"), ".gif");
this.setAttribute('src',vemsi);
}}}
function addEvent(obj,evType,fn){
if(obj.addEventListener){obj.addEventListener(evType,fn,true);return true;}
else if(obj.attachEvent){var r=obj.attachEvent("on"+evType,fn);return r;}
else{return false;}
}
addEvent(window, 'load',hover); //addEvent:thx http://www.scottandrew.com/weblog/articles/cbs-events

//-->
</script>
<div id="jshelp">
<img src="cislice1.gif" />
<img src="cislice2.gif" />
<img src="cislice2.gif" />
</div>

Bohužel je to nefunkční v parodii na prohlížeč Opera8 , funguje v nižších verzích Opery od verze 7.23, IE5+, Gecka od Firebirda přes K-meleon po Netscape a Firefox. Jenom ta Opera 8. Ale na to už jsem samozřejmě zvyklý.

Update: Tohle už funguje i v O8

<script type="text/javascript">
<!--
function hover(){
var div=document.getElementById('jshelp')
var obr=div.getElementsByTagName('img');
for (var i=0;i<obr.length;i++) {
obr[i].onmouseover=function(){
var hover=this.getAttribute('src');
hover=hover.replace(new RegExp(".gif","g"), "_hover.gif");
this.setAttribute('src',hover);
}
obr[i].onmouseout=function(){
var hover=this.getAttribute('src');
hover=hover.replace(new RegExp("_hover.gif","g"), ".gif");
this.setAttribute('src',hover);
}}}
function addEvent(obj,evType,fn){
if(obj.addEventListener){obj.addEventListener(evType,fn,true);return true;}
else if(obj.attachEvent){var r=obj.attachEvent("on"+evType,fn);return r;}
else{return false;}
}
addEvent(window, 'load',hover); //addEvent:thx http://www.scottandrew.com/weblog/articles/cbs-events

//-->
</script>
<div id="jshelp">
<img src="cislice1.gif" />
<img src="cislice2.gif" />
<img src="cislice2.gif" />
</div>