ugrás a tartalomhoz

Fura dolog a doctype-val

LordEVon · 2010. Okt. 4. (H), 19.50
Üdv! Van egy scriptem, ami azt hivatott megoldani, hogy egy pont fölé húzáskor megjelenik egy kis téglalap, amiben lehet választani különböző linkek közül.
IE-n jól működik (fura...), de FF-on nem nagyon. Illetve akkor jó, ha a doctype részt kitörlöm a <head> részig... Ez elég fura és szerintem nem jó. Íme a kód:

<!--
.menuskin{
position:absolute;
width:165px;
background-color:menu;
border:2px solid black;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
visibility:hidden;
}

.menuskin a{
text-decoration:none;
color:black;
padding-left:10px;
padding-right:10px;
}

#mouseoverstyle{
background-color:highlight;
}

#mouseoverstyle a{
color:white;
}
-->
</STYLE>

<script language="JavaScript1.2">
<!--
/*
Let?ltve a ThomasWebMuhely javascript arch?vum?b?l:
http://mitglied.lycos.de/thomaswebmuhely/
*/
var linkset=new Array()
// ITT LEHET BE?RNI A LINKEKET
linkset[0]='<div class="menuitems"><a href="aloldal/budapest.php">Budapest - információk</a></div>'
linkset[0]+='<div class="menuitems"><a href="aloldal/budapest_pizzak.php">Budapest - étlap</a></div>'
linkset[1]='<div class="menuitems"><a href="aloldal/erd.php">Érd - információk</a></div>'
linkset[1]+='<div class="menuitems"><a href="aloldal/erd_pizzak.php">Érd - étlap</a></div>'



var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
var ns6=document.getElementById&&!document.all
var ns4=document.layers

function showmenu(e,which){

if (!document.all&&!document.getElementById&&!document.layers)
return

clearhidemenu()

menuobj=ie4? document.all.popmenu : ns6? document.getElementById("popmenu") : ns4? document.popmenu : ""
menuobj.thestyle=(ie4||ns6)? menuobj.style : menuobj

if (ie4||ns6)
menuobj.innerHTML=which
else{
menuobj.document.write('<layer name=gui bgColor=#E6E6E6 width=165 onmouseover="clearhidemenu()" onmouseout="hidemenu()">'+which+'</layer>')
menuobj.document.close()
}

menuobj.contentwidth=(ie4||ns6)? menuobj.offsetWidth : menuobj.document.gui.document.width
menuobj.contentheight=(ie4||ns6)? menuobj.offsetHeight : menuobj.document.gui.document.height
eventX=ie4? event.clientX : ns6? e.clientX : e.x
eventY=ie4? event.clientY : ns6? e.clientY : e.y

var rightedge=ie4? document.body.clientWidth-eventX : window.innerWidth-eventX
var bottomedge=ie4? document.body.clientHeight-eventY : window.innerHeight-eventY

if (rightedge<menuobj.contentwidth)

menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX-menuobj.contentwidth : ns6? window.pageXOffset+eventX-menuobj.contentwidth : eventX-menuobj.contentwidth
else

menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX : ns6? window.pageXOffset+eventX : eventX

if (bottomedge<menuobj.contentheight)
menuobj.thestyle.top=ie4? document.body.scrollTop+eventY-menuobj.contentheight : ns6? window.pageYOffset+eventY-menuobj.contentheight : eventY-menuobj.contentheight
else
menuobj.thestyle.top=ie4? document.body.scrollTop+event.clientY : ns6? window.pageYOffset+eventY : eventY
menuobj.thestyle.visibility="visible"
return false
}

function contains_ns6(a, b) {

while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function hidemenu(){
if (window.menuobj)
menuobj.thestyle.visibility=(ie4||ns6)? "hidden" : "hide"
}

function dynamichide(e){
if (ie4&&!menuobj.contains(e.toElement))
hidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
hidemenu()
}

function delayhidemenu(){
if (ie4||ns6||ns4)
delayhide=setTimeout("hidemenu()",500)
}

function clearhidemenu(){
if (window.delayhide)
clearTimeout(delayhide)
}

function highlightmenu(e,state){
if (document.all)
source_el=event.srcElement
else if (document.getElementById)
source_el=e.target
if (source_el.className=="menuitems"){
source_el.id=(state=="on")? "mouseoverstyle" : ""
}
else{
while(source_el.id!="popmenu"){
source_el=document.getElementById? source_el.parentNode : source_el.parentElement
if (source_el.className=="menuitems"){
source_el.id=(state=="on")? "mouseoverstyle" : ""
}
}
}
}

if (ie4||ns6)
document.onclick=hidemenu
//-->
</script>






 <DIV id="popmenu" class="menuskin" onMouseover="clearhidemenu();highlightmenu(event,'on')" onMouseout="highlightmenu(event,'off');dynamichide(event)">
</DIV>
<img src="pic/terkep.jpg" usemap="#terkep" border="0">
<map name="terkep">
 
<area shape="rect" coords="267,169,343,187" href="#" onMouseover="showmenu(event,linkset[0])" onMouseout="delayhidemenu()"">
<area shape="circ" coords="255,188,14" href="#" onMouseover="showmenu(event,linkset[1])" onMouseout="delayhidemenu()"">


Szívesen veszem az ötletet, mit lehet ezzel kezdeni, illetve milyen scriptet keressek az ilyen problémára (fontos, hogy image mapon is működjön!)

Köszi szépen
 
1

Rossz irány

Kevlar · 2010. Okt. 4. (H), 20.16
Én azt tanácsolom, hogy keress valami naprakészebb kódot. Ez a "script" kb 7-8 éves lehet, biztos vagyok benne, hogy vannak ennél sokkal egyszerűbb megoldások is arra, amit szeretnél.
Bár ezt én részemről nem igazán tudom értelmezni, ha jobban leírod és/vagy mutatsz példát, biztosan el tudunk indítani valamerre.

Doctype: Az a megoldás sosem lesz cross-browser, amiben nincs doctype, ezt felejtsd is el, hogy kitörlöd.
3

Nem is akarom kitörölni. És

LordEVon · 2010. Okt. 4. (H), 20.42
Nem is akarom kitörölni. És igen, van vagy 8 éves a script. Én szívesen lemondok róla, mert nem túl jól működik, nekem sem igazán tetszik, de így találtam fenn a thomas webműhelyen, ahogyan én raktam fel (illetve majdnem így)

Igazából az lenne a legjobb, ha azt meg tudnátok mondani, milyen néven keressem a scriptet, ami onmousover-rel működik. Méghozzá: pl ez egy LINK. amikor link fölé húzom az egeret, akkor felugrik (akár egy rejtett div) egy kis ablak (de nem popup, vagy ilyesmi), és arra rá lehet húzni az egeret, s ki lehet választani a tartalmát.

Gyakorlatilag kb mint egy menü, csak imagemapon is működnie kéne...:)
4

Tisztán CSS?

Kevlar · 2010. Okt. 4. (H), 21.22
Ezt az egészet meg lehetne oldani szerintem CSS-el, max a :hover hiányos támogatás maitt IE6-ban nem megy. Drop-down menüre CSS-el rengeteg példát találsz, pl itt:
http://www.cssplay.co.uk/menus/

Továbbra is azt mondom, hogy keress egy példát, ami nagyjából azt csinálja amit akarsz, és ha nem tudod kigobózni, akkor biztosan tudunk segíteni.
5

Szóval megtaláltam amilyet

LordEVon · 2010. Okt. 5. (K), 10.22
Szóval megtaláltam amilyet szeretnék kb.
http://www.cssplay.co.uk/menu/solar_map.html
Itt található, ki is próbáltam, de igen bonyolúlt ennek az átírása... Ilyen eredményt kapó egyszerűbb esetleg nincs szerintetek?
7

így találtam fenn

Thom · 2010. Okt. 6. (Sze), 23.16
így találtam fenn a thomas webműhelyen

Bocsi, azt én követtem el anno. Még a webbel barátkozásom hajnalán ollóztam össze pár cuccot hogy közzétegyem, akkoriban még kevés magyar nyelvű anyag volt elérhető. De tényleg nem nyúltam már hozzá vagy 6 éve. Talán le kéne gyalulni az egészet, ha nem frissítem - nem tudom...
Bocs az offért.
2

Hol kezdődik?

Poetro · 2010. Okt. 4. (H), 20.20
Csak az nem derült ki, hol kezdődik az oldal. Amit én látok, az egy nagy halom összehordott betű. Nem lehetne hogy legalább HTML4 legyen az oldal? És mondjuk teljesen valid? És mondjuk használnál kódszínezőt? Ez a szkript egyébként is kb. 10 éves, kb azóta nem használnak IE4-et, ami 1997-ben jelent meg. Hasonlóan a Netscape 6-hoz, ami 1998-ban jelent meg. Meg tudod mutatni ezt működőben? Vagy, hogy hogyan kellene kinéznie?
6

areaOffset

Poetro · 2010. Okt. 5. (K), 18.38
Csináltam egy kis aranyos areaOffset jQuery kiegészítőt, és annak segítségével meg is valósítottam a problémádat.
Az areaOffset plugin:
(function ($) {
  /**
   * Lekérdezi az <area> elem a <map> elemben levő eltolódását.
   *
   * @param center {Boolean}
   *   A közép koordinátáját adja vissza.
   * @returns
   *   Az eltolódás egy objektumban, mely a követkzőképp néz ki: {top: 0, left: 0}.
   */
  $.fn.areaOffset = function(center) {
    var areas = this.filter('area'),
        area = areas.length && areas[0],
        coords = (area && $.map(area.coords.split(','), $.trim)) || [],
        cl = coords.length,
        offset = {    // Alapértelmezett eltolódás
          left: 0,
          top:  0
        },
        shape = area.shape.toLowerCase(),
        xs, ys, xm, ym,
        map, obj,
        setFilters = $.expr.setFilters;

    if (cl > 2) {
      switch (shape) {
        case 'circle':
          // Alapértelmezetten a középpontját kapjuk,
          // számolni kell, ha a bal-felső sarok szükséges.
          offset = {
            left : +coords[0] - (center ? 0 : coords[2]),
            top  : +coords[1] - (center ? 0 : coords[2])
          };
          break;
        case 'rect':
        case 'poly':
          if (cl % 2 == 0) {
            xs = $.grep(coords, setFilters.even); // Páros értékek X koordináták
            ys = $.grep(coords, setFilters.odd);  // Páratlan értékek Y koordináták
            xm = Math.min.apply(Math, xs);        // Minimuma az X koordinátáknak
            ym = Math.min.apply(Math, ys);        // Minimuma az Y koordinátáknak

            // Kiszámoljuk a közepét, amennyiben szükséges.
            offset = {
              left : xm + (center ? (Math.max.apply(Math, xs) - xm)  / 2 : 0),
              top  : ym + (center ? (Math.max.apply(Math, ys) - ym)  / 2 : 0)
            };
          }
          break;
        default:
          if (center) {
            map = areas.eq(0).closest('map');
            obj = map.length && $('[usemap=#' + map[0].name + ']');
            if (obj.length) {
              offset = {
                left: obj.height() / 2,
                top:  obj.width() / 2
              };
            }
          }
      }
    }
    return offset;
  };
}(jQuery));
A menü megjelenítése innentől kezdve már egyszerű:
jQuery(function ($) {
  var planetImage = $('#planetimage'),      // A kép
      imageOffset = planetImage.position(); // A kép eltolódása

  $('#planetmap').children('area').each(function () {
    var menu = $(this.id.replace(/^map-/, '#menu-')), // A kapcsolódó menu
        area = $(this),                    // Az <area>
        offset = area.areaOffset(true), // Az <area> eltoldódása
        menuOffset = {                     // A menü eltolódása
          left : imageOffset.left + offset.left,
          top  : imageOffset.top + offset.top
        };
    if (menu.length) {
      // Beállítjuk az eseményeket a menüre, valamint az eltolódását
      menu.offset(menuOffset).bind('mouseleave', function () {
        menu.removeClass('menu-show');
      })
    }
    $.data(this, 'menu', menu); // Hozzárendeljük a menüt az <area>-hoz
  }).bind('mouseenter', function () {
    var menu = $.data(this, 'menu'); // Lekérdezzük a menüt

    if (menu) {
      // Minden más menüt elrejtünk
      $('dl.menu').removeClass('menu-show');
      // Megjelenítjük az <area>-hoz tartozó menüt.
      menu.addClass('menu-show');
    }
  });
});
És a HTML:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
  <style type="text/css">
    img {
      border-style: none;
    }
    dl.menu {
      display: none;
      border: 1px solid black;
      position: absolute;
      margin: 0;
      padding: 10px;
      background: gold;
    }
    dl.menu-show {
      display: block;
    }
    nav {
      display: block;
      position: relative;
    }
  </style>
	<title>ImageMap</title>
</head>
<body>
  <nav>
    <p>The plantes of the solar system serving as a navigation:</p>
    <map name="planetmap" id="planetmap">
      <area shape="circle" coords="84,214,14" href="#mercury" alt="Mercury" id="map-mercury" />
      <area shape="circle" coords="125,190,26" href="#venus" alt="Venus" id="map-venus" />
      <area shape="circle" coords="175,161,26" href="#earth" alt="Earth" id="map-earth" />
      <area shape="circle" coords="223,135,22" href="#mars" alt="Mars" id="map-mars" />
    </map>
    <dl id="menu-earth" class="menu">
      <dt>Name</dt>
      <dd>Earth</dd>
      <dt>Mean radius</dt>
      <dd>6,371.0 km</dd>
    </dl>
    <dl id="menu-venus" class="menu">
      <dt>Name</dt>
      <dd>Venus</dd>
      <dt>Mean radius</dt>
      <dd>6,051.8 km</dd>
    </dl>
    <dl id="menu-mercury" class="menu">
      <dt>Name</dt>
      <dd>Mercury</dd>
      <dt>Mean radius</dt>
      <dd>2,439.7 km</dd>
    </dl>
    <dl id="menu-mars" class="menu">
      <dt>Name</dt>
      <dd>Mars</dd>
      <dt>Mean radius</dt>
      <dd>3,396.2 km</dd>
    </dl>
    <img src="planets3.jpg" alt="Solar system" longdesc="http://www.vtaide.com/png/images/planets3.jpg" usemap="#planetmap" id="planetimage" />
  </nav>
</body>
</html>