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:

</STYLE>

<script language="JavaScript1.2">

</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

■

HTML, CSS, JavaScript, Ajax

csirip

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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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...:)

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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?

A hozzászóláshoz regisztráció és belépés szükséges
új téma

í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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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?

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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>

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Weblabor

Keresés