mapa slovenska

vajda65

ahojte chcel by som na stránku dať niečo takéto

http://www.bonul.sk/index.php?module=kontakt

nemal by to byť ideálne flash ale chcel by som teda že človek klikne na západné slovensko a hodí mu to kontakt na firmu, klikne na stredné hodí mu to kontakt alebo takto že mestá kde je zastúpenie budú zvýraznené.

Nemá niekto na to náhodou zdroják?

Veľmi by mi to pomohlo.

dík

//autoeditácia príspevku ( 11 May 2008, 19:33 )
a ešte by som potreboval pomôcť so zarovnaním tejto tabulky na ľavo, nejak mi to nejde.

vdaka

"kde zas robím chybu"

Kód: Vybrať všetko

<td valign="top" width="304"><table border="0" cellpadding="2" cellspacing="2" width="425">
                                    

                                    <tbody><tr>
                                      <td align="midle" bgcolor="#eeeeee" valign="middle" width="171">Banskobystrický kraj</span></td>
                                      <td class="style9" align="left" bgcolor="#eeeeee">NETTECH, s. r. o.<br>
                                        Partizánska cesta 94<br>
                                        974 01 Banská Bystrica<br>
                                      </td>

                                    </tr>
                                    <tr>
                                      <td class="style9" align="center" bgcolor="#eeeeee" valign="middle"><table border="0" cellpadding="0" cellspacing="0" width="94%">
                                        <tbody><tr>
                                      <a href="http://www.nettech.sk/" target="_blank">WEB</a></td>   
                                        </tr>
                                      </tbody></table>                                        </td>

                                      <td class="style9" bgcolor="#eeeeee">Tel: +421 48 415 23 62 <br>
 Fax:  +421 48 415 23 62<br>
                                        Mob: +421 918 629 559</div></td>

                                    </tr>
                                  </tbody></table>
                                    <br>

                                    <table border="0" cellpadding="2" cellspacing="2" width="421">
                                      <tbody><tr>
                                        <td align="center" bgcolor="#eeeeee" valign="middle" width="171">Žilinský kraj</span></td>
                                        <td class="style9" align="left" bgcolor="#eeeeee" width="243"><p>Ing. Miroslav Hartmann H M H - servis<br>

                                          Gbeľany 401<br>
                                        013 01 Gbeľany
                                        </p></td>
                                      </tr>
                                      <tr>
                                        <td class="style9" align="center" bgcolor="#eeeeee" valign="middle">
                                          <table border="0" cellpadding="0" cellspacing="0" width="94%">

                                            <tbody><tr>
                                              
                                             
                                            </tr>
                                        </tbody></table></td>

                                        <td class="style9" bgcolor="#eeeeee">Tel: 0845 4022300<br>
Mail: [email protected]
                                          </div></td>

                                      </tr>
                                    </tbody></table>
                                  <br>



<table border="0" cellpadding="2" cellspacing="2" width="421">
                                      <tbody><tr>
                                        <td align="center" bgcolor="#eeeeee" valign="middle" width="171">Košický kraj</span></td>
                                        <td class="style9" align="left" bgcolor="#eeeeee" width="243"><p>Slovakia Supercomputers s. r. o.<br>

                                          Letná 27<br>
                                          040 01 Košice<br>
                                        </p></td>
                                      </tr>
                                      <tr>
                                        <td class="style9" align="center" bgcolor="#eeeeee" valign="middle">
                                          <table border="0" cellpadding="0" cellspacing="0" width="94%">

                                            <tbody><tr>
                                              <td align="center"><a href="http://www.supercomputers.sk/" target="_blank">WEB</a></td>
                                            </tr>
                                        </tbody></table></td>
                                        <td class="style9" bgcolor="#eeeeee">Tel: 055 / 632 34 68<br>
Fax: 055 / 632 34 68
                                         
                                      </tr>
                                    </tbody></table>
                                  <br>

v prvom riadku: <td valign="top" width="304"> pridaj tam align="left"

nechcem zakladať novú tému, tak to hodím sem...
ja by som zas potreboval vysvetliť, že ako spraviť také niečo, aby sa mi po "onmouseover" objavilo to okníčko s nejakým obsahom... predpokladám, že javascript... ale neviem o tom nič, s čím, kde začať..
prosím poraďte...

to vajda65: ja by som to riešil najskôr nejakým obrázkom mapy

beluský napísal:...

Ja by som použil nejakú javascript knižnicu na zobrazovanie tooltipov (prípadne stačí aj css tooltip).

beluský napísal:nechcem zakladať novú tému, tak to hodím sem...
ja by som zas potreboval vysvetliť, že ako spraviť také niečo, aby sa mi po "onmouseover" objavilo to okníčko s nejakým obsahom... predpokladám, že javascript... ale neviem o tom nič, s čím, kde začať..
prosím poraďte...

to vajda65: ja by som to riešil najskôr nejakým obrázkom mapy

napíšem ti ako to mám riešené ja, je to moja tvorba, možno (určite) ak niečo vyhladáš na nete tak nájdeš kvalitnejšie. Linky mám takto:

Kód: Vybrať všetko

<a class="menu" onClick="index()" onmouseover='popis(4,event,true)' onmousemove='popis(4,event,true)' onmouseout='popis(4,event,false)'>

a javascript k tomu je takýto:

Kód: Vybrať všetko

function popis(ktory,e,stav){
			var div = document.getElementById('popis');
			var x = 0;
    		var y = 0;
			if (e.pageX){//Moz
				x=e.pageX
				y=e.pageY
				} else if(e.clientX){//IE
				x=e.clientX + document.body.scrollLeft;
				y=e.clientY + document.body.scrollTop;
			}
			div.className='popis';
			switch (ktory){
				case 1: {text = 'Odhlásenie<hr>Kliknutím sem sa odhlásite zo svojho úctu.';
						break;}
				case 2: {text = 'Predchádzajúci<hr>Zobrazí kontroling predchádzajúceho týždna';
							if(hodnoty.length>0){
								div.className='alert';
								text = 'Pozor<hr>Vykonali ste zmeny, ktoré nie sú uložené. Prehodením týždna o neuložené údaje prídete';
							}
						break;}
				case 3: {text = 'Nasledujúci<hr>Zobrazí kontroling nasledujúceho týždna';
							if(hodnoty.length>0){
								div.className='alert';
								text = 'Pozor<hr>Vykonali ste zmeny, ktoré nie sú uložené. Prehodením týždna o neuložené údaje prídete';
							}
						break;}
				case 4: {text = 'Index<hr>Spät na úvodnú stránku.';
						break;}
				case 5: {text = 'Kontroling<hr>Vyplnenie kontrolingovej tabulky.';
						break;}
				case 6: {text = 'Štatistiky<hr>Prehlad Vaších štatistík, a štatistík Vašich spolupracovníkov.';
						break;}
				case 7: {text = 'Profil<hr>Zobrazenie a upravenie osobného profilu';
						break;}
				case 8: {text = 'Registrácia<hr>Registrácia nového spolupracovníka do systému.';
						break;}
				case 9: {text = 'FAQ<hr>Pomocník k používaniu kontroling manager online.';
						break;}
				}
				text += '<hr><img src="data/images/pglogo.gif" align="left" valign="bottom">';
			div.innerHTML = text;
    		div.style.top = (y-15)+"px";
    		div.style.left = (x+15)+"px";	
			if (stav) div.style.display = 'block'; else div.style.display = 'none';
}

a ešte na stránke kde to chceš, mám jeden skrytý div:

Kód: Vybrať všetko

<div class="popis" id="popis"></div>

ktorý je hneď na začiatku body

ukážka je tu: http://audiooidua.ic.cz/kontroling/ (je to nedorobené, tak si to nevšímajte). link nemám cez href, ale na onclick volanú fciu, lebo je to celé robené ajaxom (vrátane navigácie)

vajda65

to som skúšal ale nešlo to aj tak

Kód: Vybrať všetko

<td valign="top" width="304" align="left"><table border="0" cellpadding="2" cellspacing="2" width="425">
                                    

                                    <tbody><tr>

//autoeditácia príspevku ( 12 May 2008, 20:11 )
nakoniec to šlo ale další problémik.

Chcem orámovať túto tabulku týmto "border:1px solid #c0c0c0"

kde to zadám aby to orámovalo tabulku ako celok

Kód: Vybrať všetko

<tbody>
<td valign="top" width="304" align="middle"><table border="0" cellpadding="2" cellspacing="2" width="545">

	<h4 align="left">Prospekty: Hardvér</h4><div class="left"><table border="0" cellpadding="3" cellspacing="0" width="90%"><tbody><tr bgcolor="#b0c4de"><td width="150"><b>Meno súboru</b></td><td><b>Popis</b></td><td width="50"><b>Formát</b></td><td width="70"><b>Veľkosť</b></td></tr><tr class="leftalign"><td valign="top">
<a href="http://www.biometric.sk/catalog/pdf/SF-3000 PFC.pdf">SF-3000 PFC</a></td><td valign="top">
	 
	  SF-3000 PFC - biometrický terminál, zabudovaný ethernet prevodník.
	 </td><td><a href="http://www.biometric.sk/catalog/pdf/SF-3000 PFC.pdf">pdf</a></td><td>1 123 kB</td></tr>

<tr class="leftalign"><td valign="top" bgcolor="#cccccc"><a href="http://www.biometric.sk/catalog/pdf/SF-3000 PC.pdf">SF-3000 PC</a></td><td valign="top" bgcolor="#cccccc">

	  SF-3000 PC - kartový terminál, zabudovaný ethernet prevodník. 
	 </td><td bgcolor="#cccccc"><a href="http://www.biometric.sk/catalog/pdf/SF-3000 PC.pdf">pdf</a></td><td bgcolor="#cccccc">2 325 kB</td></tr>

<tr class="leftalign"><td valign="top">
<a href="http://www.biometric.sk/catalog/pdf/lv-5000.pdf">LV-5000 PFC</a></td><td valign="top">
	 
	  LV-5000 PFC - biometrický terminál, unikátny multispektrálny skener, zabudovaná kamera.
	 </td><td><a href="http://www.biometric.sk/catalog/pdf/lv-5000.pdf">pdf</a></td><td>2 480 kB</td></tr>

<tr class="leftalign"><td valign="top" bgcolor="#cccccc"><a href="http://www.biometric.sk/catalog/pdf/VPO111.pdf">VPO-411 PC</a></td><td valign="top" bgcolor="#cccccc">

	  VPO-411 - kartový, zabudovaná kamera. 
	 </td><td bgcolor="#cccccc"><a href="http://www.biometric.sk/catalog/pdf/VPO111.pdf">pdf</a></td><td bgcolor="#cccccc">3 874 kB</td></tr>


<tr class="leftalign"><td valign="top">
<a href="http://www.biometric.sk/catalog/pdf/ACU-121.pdf">ACU-121</a></td><td valign="top">
	 
	  ACU-121 - jednoduchá kartová čítačka, odolná voči vplyvom počasia, sieťovateľná.
	 </td><td><a href="http://www.biometric.sk/catalog/pdf/ACU-121.pdf">pdf</a></td><td>1 257 kB</td></tr>
</tbody></table></div>
<br>


<tbody>
<td valign="top" width="304" align="middle"><table border="0" cellpadding="2" cellspacing="2" width="545">

	<h4 align="left">Prospekty: Softvér</h4><div class="left"><table border="0" cellpadding="3" cellspacing="0" width="90%"><tbody><tr bgcolor="#b0c4de"><td width="150"><b>Meno súboru</b></td><td><b>Popis</b></td><td width="50"><b>Formát</b></td><td width="70"><b>Veľkosť</b></td></tr><tr class="leftalign"><td valign="top">
<a href=>AttendancePro</a></td><td valign="top">
	 
	  AttendancePro - dochádzkový softvér.
	 </td><td><a href=>pdf</a></td><td>1 123 kB</td></tr>


</tbody></table></div>
<br>

<tbody>
<td valign="top" width="304" align="middle"><table border="0" cellpadding="2" cellspacing="2" width="545">

	<h4 align="left">Prospekty: Mechanické zábrany - speedpass</h4><div class="left"><table border="0" cellpadding="3" cellspacing="0" width="90%"><tbody><tr bgcolor="#b0c4de"><td width="150"><b>Meno súboru</b></td><td><b>Popis</b></td><td width="50"><b>Formát</b></td><td width="70"><b>Veľkosť</b></td></tr><tr class="leftalign"><td valign="top">
<a href="http://www.biometric.sk/catalog/pdf/speedpass.pdf">Speedpass</a></td><td valign="top">
	 
	  Mechanické zábrany - speedpass.
	 </td><td><a href="http://www.biometric.sk/catalog/pdf/speedpass.pdf">pdf</a></td><td>3 909 kB</td></tr>


</tbody></table></div>
<br>

<tbody>
<td valign="top" width="304" align="middle"><table border="0" cellpadding="2" cellspacing="2" width="425">

	<h4 align="left">Ostatné</h4><div class="centeralign"><table border="0" cellpadding="3" cellspacing="0" width="90%"><tbody><tr bgcolor="#b0c4de"><td width="150"><b>Meno súboru</b></td><td><b>Popis</b></td><td width="50"><b>Formát</b></td><td width="70"><b>Veľkosť</b></td></tr><tr class="leftalign"><td valign="top">
<a href="/download/cennik.xls">Aktuálny cenník</a></td><td valign="top">
	 
	  cenník platný od 1.7.2008
	 </td><td><a href="/download/cennik.xls"">xls</a></td><td>174 kB</td></tr>

<tr class="leftalign"><td valign="top" bgcolor="#cccccc"><a href=http://www.biometric.sk/catalog/download/attendancepro.rar>AttendancePro.rar</a></td><td valign="top" bgcolor="#cccccc">

	  Ostatná aktualizácia č. 1.3.101 
	 </td><td bgcolor="#cccccc"><a href="http://www.biometric.sk/catalog/download/attendancepro.rar">rar</a></td><td bgcolor="#cccccc">188 kB</td></tr></tbody></table></div>

KaktusBR

som sa s tym trapil asi 15 minut ale ten kod je taky neprehladny ze som to nespravil ani divom, ani tabulkou.

nemoze sa to predsa zacinat <td> by som to prerobil a tabulku dal len tam kde ma byt a ostatok do divov - ale asi to je nejaky front page alebo co

vajda65

nepomôže mi niekto prosím s tou tabulkou? teraz som zistil že aj v IE ju zobrazuje zle hrozne úzko.
Nepomôže mi niekto prečistiť ten kód? Vdaka

KaktusBR

ked robis vo front page alebo v nejakom wdysiwdyg editore tak nemozes cakat ze to spravi tak ako ocakavas. ak by si si pisal kod sam tak mas v tom prehlad a nemoze sa stat ze sa ti nieco zobrazi zle, a ked aj vies to rychlo najst a opravit. ten kod je jeden bordel bez konstrukcie.

som ti to upravil, takto to bude fungovat. sirku tabuliek staci prepisat, nie roztahovat v editore lebo ten prida kopu zbytocnych riadkov. a odsadenie bordra od tabuliek ries cez padding napr.

neni to idealne riesenie ako som to upravil ale splna ucel, dufam

Kód: Vybrať všetko


<div style="border:10px solid #c0c0c0">

<h4 align="left">Prospekty: Hardvér</h4>

<table border="0" cellpadding="3" cellspacing="0" width="90%">

<tr bgcolor="#b0c4de">

<th width="150"><b>Meno súboru</b></th>
<th><b>Popis</b></th>
<th width="50"><b>Formát</b></th>
<th width="70"><b>Veľkosť</b></th>

</tr>

<tr class="leftalign">

<td valign="top"><a href="http://www.biometric.sk/catalog/pdf/SF-3000 PFC.pdf">SF-3000 PFC</a></td>
<td valign="top">SF-3000 PFC - biometrický terminál, zabudovaný ethernet prevodník.</td>
<td><a href="http://www.biometric.sk/catalog/pdf/SF-3000 PFC.pdf">pdf</a></td>
<td>1 123 kB</td>

</tr>

<tr class="leftalign">

<td valign="top" bgcolor="#cccccc"><a href="http://www.biometric.sk/catalog/pdf/SF-3000 PC.pdf">SF-3000 PC</a></td>
<td valign="top" bgcolor="#cccccc">SF-3000 PC - kartový terminál, zabudovaný ethernet prevodník.</td>
<td bgcolor="#cccccc"><a href="http://www.biometric.sk/catalog/pdf/SF-3000 PC.pdf">pdf</a></td>
<td bgcolor="#cccccc">2 325 kB</td>

</tr>

<tr class="leftalign">
<td valign="top"><a href="http://www.biometric.sk/catalog/pdf/lv-5000.pdf">LV-5000 PFC</a></td>
<td valign="top">LV-5000 PFC - biometrický terminál, unikátny multispektrálny skener, zabudovaná kamera.</td>
<td><a href="http://www.biometric.sk/catalog/pdf/lv-5000.pdf">pdf</a></td>
<td>2 480 kB</td>

</tr>

<tr class="leftalign">

<td valign="top" bgcolor="#cccccc"><a href="http://www.biometric.sk/catalog/pdf/VPO111.pdf">VPO-411 PC</a></td>
<td valign="top" bgcolor="#cccccc">VPO-411 - kartový, zabudovaná kamera.</td>
<td bgcolor="#cccccc"><a href="http://www.biometric.sk/catalog/pdf/VPO111.pdf">pdf</a></td>
<td bgcolor="#cccccc">3 874 kB</td>

</tr>


<tr class="leftalign">

<td valign="top"><a href="http://www.biometric.sk/catalog/pdf/ACU-121.pdf">ACU-121</a></td>
<td valign="top">ACU-121 - jednoduchá kartová čítačka, odolná voči vplyvom počasia, sieťovateľná.</td>
<td><a href="http://www.biometric.sk/catalog/pdf/ACU-121.pdf">pdf</a></td>
<td>1 257 kB</td>

</tr>

</table>


<h4 align="left">Prospekty: Softvér</h4>

<table border="0" cellpadding="3" cellspacing="0" width="90%">

<tr bgcolor="#b0c4de">

<th width="150"><b>Meno súboru</b></th>
<th><b>Popis</b></th>
<th width="50"><b>Formát</b></th>
<th width="70"><b>Veľkosť</b></th>

</tr>

<tr class="leftalign">

<td valign="top">
<a href=>AttendancePro</a></td>
<td valign="top">AttendancePro - dochádzkový softvér.</td>
<td><a href=>pdf</a></td>
<td>1 123 kB</td>

</tr>

</table>

<h4 align="left">Prospekty: Mechanické zábrany - speedpass</h4>

<table border="0" cellpadding="3" cellspacing="0" width="90%">

<tr bgcolor="#b0c4de">

<th width="150"><b>Meno súboru</b></th>
<th><b>Popis</b></th>
<th width="50"><b>Formát</b></th>
<th width="70"><b>Veľkosť</b></th>

</tr>

<tr class="leftalign">

<td valign="top"><a href="http://www.biometric.sk/catalog/pdf/speedpass.pdf">Speedpass</a></td>
<td valign="top">Mechanické zábrany - speedpass.</td>
<td><a href="http://www.biometric.sk/catalog/pdf/speedpass.pdf">pdf</a></td>
<td>3 909 kB</td>

</tr>

</table>

</div>

vajda65

díky chalan je to super, trochu som to upravil, ale potreboval by som ešte vycentrovať to na stred a <tr class="centeralign"> mi nefunguje. A ešte zmenšiť písmo ked sa pozrieš tak je to také nepekné

http://www.biometric.sk/catalog/downloads.php

písmo by som chcel takéto

KaktusBR

skusal som viac sposobov ale nejako ti to tam mixuju tie tabulky tak najjednoduchsie budes mat ak ku kazdej tabulke pridas margin:auto; font-size:10px; cize kazda ta tabulka bude:

<table border="1" cellpadding="3" cellspacing="0" width="90%" style="margin:auto; font-size:11px;">

margin:auto - vycentruje tabulku
font-size - dal som tam 11px ale si to mozes zmenit ako chces

potom ti ostanu tie nadpisy nalavo.

- ak ich chces na stred napis kazdemu nadpisu toto: <h4 style="text-align:center;">
- ak ich chces zarovnat na lavy kraj tabuliek napis: <h4 style=" width:90%; margin:10px auto 3px auto;"> to margin 10px je vzdialenost od hora a 3px od dola

vajda65

díky moc chalan vyzerá to fakt super vo FF, presne ako som chcel ale prečo zas ten zasraný IE robí blbosti. Je to tam odsadené stále na ľavo.

http://www.biometric.sk/catalog/downloads.php

KaktusBR

dizajn mas celkom pekny ale kod uplne strasny. len tak na rychlo skus do toho prveho divu pridat padding aj s _

<div style="border:1px solid #c0c0c0; _padding-left:20px;">

kedze nepouzivas externy styl zvlast pre ie tak toto je asi jedine riesenie aby vo FF ostalo tak ako ma a v IE sa posunulo napr. o 20px na lavo