Autor Zpráva
ppooler
Profil
...ani nevím přesně jak to pojmenovat, takže nemá smysl používat vyhledávač a raději založím nový thread.

Chtěl bych nějaký link ,kde by bylo trochu popsáno, jak se dají udělat takovéty "okýnka"- které se při přejetí kurzoru na odkaz (nejčastěji v drobečkové navigaci) "vysunou" a jejich obsah jsou další odkazy,nebo jen text.

Jako je např. tady
http://www.amsoft.cz/index.html
hugo
Profil *
hledej "drop-down menu"
treba na http://cssplay.co.uk
Anonymní
Profil *
http://css.interval.cz/clanky/vysouvaci-menu-rozcestnik/
ppooler
Profil
Díky, to je ono-podle tohoto návodu by neměl být probém takové menu udělat ,ale nakonec jsem usoudil ,že tento prvek nevyužiji,leda trochu jiný,podobný...

Proto píšu do tohoto threadu ,které má neutrální název:Jak udělat...

Jak udělat klikací mapu která by využívala těchto "okýnek" při najetí myši(kurzoru)-její podklad by byl velký obrázek ?


Prostě chci využít toho,že jeden nejmenovaný program umí intuitivně vytvářet klikací mapy,a já bych tak přidělil bližší informace při najetí na objekty na této
stránce...na celém obrázku-, jen nevím jak zapsat správně značku s atributem ,která "způsobí"- tento html efekt ...

Lze toho docílit bez CSS nebo Javascriptu- teba nějakým atributem <area title... ?
ppooler
Profil
Tady podle toho není uplně jisté ,jestli je pro atribut title ve značce area podpora ze strany prohlížečů:
http://www.jakpsatweb.cz/html/obrazky.html#area
ppooler
Profil
Zkoušel jsem přidat tuto deklaraci ,ale nefungujeto ani ve FF
nohref="title="text text text">
ppooler
Profil
Bohatě by mi stačil odkaz na stránku ,kde je toto použito- ve zdr.kódu už bych si to našel...
ppooler
Profil
<img src="manual.jpg" alt="" usemap="#ImageMapImageMap0" style="position: absolute; left: 125px; top: 110px; width: 714px; height: 1056px; z-index: 0;" align="top" border="0" height="1056" width="714">

<a href="manual.html"> <map name="ImageMapImageMap0">
<area shape="circle" coords="319,41,32" title="ahoj">
<area shape="rect" coords="288,94,523,145" title="ahoj">
<area shape="rect" coords="288,181,546,226" title="ahoj">
<area shape="rect" coords="309,326,413,354" title="ahoj">
<area shape="rect" coords="35,518,218,538" title="ahoj">
<area shape="rect" coords="23,897,416,917" title="ahoj">
<area shape="rect" coords="26,975,298,1021" title="ahoj">
<area shape="rect" coords="426,1011,666,1027" title="ahoj">
<area shape="polygon" coords="600,958,505,957,531,999,425,999,477,919,494,942,599,943" title="ahoj">
<area shape="circle" coords="41,688,9" title="ahoj">
</map>

<map name="ImageMapImageMap0">
<area shape="circle" coords="319,41,32" title="ahoj">

<area shape="rect" coords="288,94,523,145" title="ahoj">
<area shape="rect" coords="288,181,546,226" title="ahoj">
<area shape="rect" coords="309,326,413,354" title="ahoj">
<area shape="rect" coords="35,518,218,538" title="ahoj">
<area shape="rect" coords="23,897,416,917" title="ahoj">
<area shape="rect" coords="26,975,298,1021" title="ahoj">
<area shape="rect" coords="426,1011,666,1027" title="ahoj">
<area shape="polygon" coords="600,958,505,957,531,999,425,999,477,919,494,942,599,943" title="ahoj">
<area shape="circle" coords="41,688,9" title="ahoj">
</map>



Co je teda v tomto kódu špatně ?
Bubák
Profil
ppooler
O co se pokoušíš, o tohle?
<area href="#" title="popis" shape=rect coords="10,20,90,100">
ppooler
Profil
Už jsem to na 99% vyřešil,ale do té bubliny se vejde jen asi 30 znaků,a to už v rámci html asi nijak nevyřeším...
Luba
Profil *
Cau mam tento přiklad:var scriptsOn = ( ( browser == "IE" ) || ( browser == "NN" ) ) ? true : false;

function getCmdString( layerName, show )
{
strCmd = "";
if( browser == "IE" )
{
if( show )
{
strCmd = "document.all[ '" + layerName + "' ].style.visibility = 'visible'";
}
else
{
strCmd = "document.all[ '" + layerName + "' ].style.visibility = 'hidden'";
}
}
if( browser == "NN" )
{
if( show )
{
strCmd = "document.layers[ '" + layerName + "' ].visibility = 'show'";
}
else
{
strCmd = "document.layers[ '" + layerName + "' ].visibility = 'hide'";
}
}

return strCmd;
}
// --></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"><!--

var timer;

function RegisterImage(imgName, imgOn, imgOff)
{
if (scriptsOn) {
eval (imgName + "On = new Image()");
eval (imgName + "On.src = "" + imgOn + """);
eval (imgName + "Off = new Image()");
eval (imgName + "Off.src = "" + imgOff + """);
}
}

function ImageOver(imgName)
{
if (scriptsOn)
eval ("document." + imgName + ".src = " + imgName + "On.src");
}

function ImageOut(imgName)
{
if (scriptsOn)
eval ("document." + imgName + ".src = " + imgName + "Off.src");
}

RegisterImage ("Zacatek", "tlacitko2.gif", "tlacitko.gif");
RegisterImage ("Konec", "tlacitko2.gif", "tlacitko.gif");

function hidemenus( exc, imgName )
{
clearInterval(timer);
timer = null;
for (id=1; id<=2; id++)
{
if (id != exc)
{
eval( getCmdString( "mnui"+id, false ) );
ImageOut( imgName );
}
}
}

function outobject( imgName )
{
strCmd = "hidemenus(20, '" + imgName + "' )";
timer = setInterval( strCmd, 500 );
}

function quickhide( imgName )
{
ImageOut(imgName )
}

function onheader( hID, imgName )
{
ImageOver( imgName );
hidemenus(hID,imgName);
eval( getCmdString( "mnui"+hID, true ) );
}

function onobject()
{
clearInterval(timer);
timer = null;
}
//--></script>

<style>
<!--
table a { font-weight: bolder; font-family: Arial CE, Arial; text-decoration: none; font-size: 9pt; color: black }
a:hover { color: #55d700; text-decoration: underline}
.menubox { position: absolute; background-color: white; border-color: black; border-width: 1pt; border-style: solid; visibility:hidden }
.menulineitem { cursor:hand }
-->
</style>

</HEAD>
<BODY>

<table border="0" cellspacing="0" cellpadding="0" class="menuline">
<tr>
<td>
<a href="javascript:void(0)" id="i1" onmouseover="ImageOut('Konec'); onheader( '1', 'Zacatek' );ImageOver('Zacatek')" onmouseout="outobject( 'Zacatek' );" class="menulineitem">
<IMG SRC="tlacitko.gif" WIDTH=149 HEIGHT=26 BORDER=0 NAME=Zacatek>
</span>
</td>
<td>
<a href="javascript:void(0)" id="i2" onmouseover="ImageOut('Zacatek'); onheader( '2', 'Konec' );ImageOver('Konec')" onmouseout="outobject( 'Konec' );" class="menulineitem">
<IMG SRC="tlacitko.gif" WIDTH=149 HEIGHT=26 BORDER=0 NAME=Konec>
</span>
</td>
</tr>
</table>

<!--Menu 1-->

<table border="0" class="menubox" id="mnui1" style="left: 23; top: 35;">
<tr>
<td >
&nbsp;<a href="test.html" onmouseover="onobject(); ImageOut('Konec'); ImageOver('Zacatek');" onmouseout="outobject( 'Zacatek' );" onmousemove="onobject();" >A</a><br>
&nbsp;<a href="test.html" onmouseover="onobject(); ImageOut('Konec'); ImageOver('Zacatek');" onmouseout="outobject( 'Zacatek' );" onmousemove="onobject();" >B</a><br>
&nbsp;<a href="test.html" onmouseover="onobject(); ImageOut('Konec'); ImageOver('Zacatek');" onmouseout="outobject( 'Zacatek' );" onmousemove="onobject();" >C</a><br>
<td>
</tr>
</table>

<!--Menu 2-->

<table border="0" class="menubox" id="mnui2" style="left: 200; top: 35;">
<tr >
<td>
&nbsp;<a href="test.html" onmouseover="onobject(); ImageOut('Zacatek');ImageOver('Konec');" onmousemove="onobject();" onmouseout="outobject( 'Konec' );">jedna</a>
&nbsp;<a href="test.html" onmouseover="onobject(); ImageOut('Zacatek');ImageOver('Konec');" onmousemove="onobject();" onmouseout="outobject( 'Konec' );">dva</a>
<td>
</tr>
</table>



text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</BODY>
</HTML>
a nevim jak rozšiřit menu o dalsi položky se stejnyma vlastnostma?
Toto téma je uzamčeno. Odpověď nelze zaslat.