Forum PHP.pl > rollover i rozwijane menu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

MitS

25.04.2007, 19:34:46

Witam!

mam ogromny problem!
Otóż mam sobie taki kod:

php

[PHP] pobierz, plaintext 
<?php
echo '
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<style type="text/css" title="currentStyle" media="screen">
	@import "style.css";
</style>
<script type="text/javascript" src="scripts.js"></script>
<title>test</title>
</head>
<body id="main" xml:lang="pl">';
$mainMenu = array(
   $centrum = array(
		   'Zabiegi w gabinetach AndersSpa' => SITE_PATH.'/'.$data['lang'].'/andersspa/zabiegi-w-gabinetach-andersspa.html',
		   'Świat Saun Mazurskich' => SITE_PATH.'/'.$data['lang'].'/andersspa/swiat-saun-mazurskich.html',
		   'Dodatkowe atrakcje ' => SITE_PATH.'/'.$data['lang'].'/andersspa/dodatkowe-atrakcje.html',
	   ),
 
   $noclegi = array(
		   'Pokoje w hotelu' => SITE_PATH.'/'.$data['lang'].'/noclegi/pokoje-w-hotelu.html',
		   'Pokoje w pałacu' => SITE_PATH.'/'.$data['lang'].'/noclegi/pokoje-w-palacu.html',
		   'Całoroczne chaty' => SITE_PATH.'/'.$data['lang'].'/noclegi/caloroczne-chaty.html',
	   ),
 
   $gastronomia = array(
		   'Restauracja pałacowa' => SITE_PATH.'/'.$data['lang'].'/gastronomia/restauracja-palacowa.html',
		   'Specjalności szefa kuchni' => SITE_PATH.'/'.$data['lang'].'/gastronomia/specjalnosci-szefa-kuchni.html',
		   'Bowling Bar' => SITE_PATH.'/'.$data['lang'].'/gastronomia/bowling-bar.html',
		   'Klub Nocny' => SITE_PATH.'/'.$data['lang'].'/gastronomia/klub-nocny.html',
		   'Karczma Pod Modrzewiem (Ognisko/Grill)' => SITE_PATH.'/'.$data['lang'].'/gastronomia/karczma-pod-modrzewiem.html',
		   'Miejsca piknikowe' => SITE_PATH.'/'.$data['lang'].'/gastronomia/miejsce-piknikowe.html',
		   'Catering' => SITE_PATH.'/'.$data['lang'].'/gastronomia/catering.html',
	   ),
 
   $biznes = array(
		   'Centrum konferencyjne' => SITE_PATH.'/'.$data['lang'].'/dlabiznesu/centrum-konferencyjne.html',
		   'Integracja' => SITE_PATH.'/'.$data['lang'].'/dlabiznesu/integracja.html',
		   'Propozycje gastronomiczne' => SITE_PATH.'/'.$data['lang'].'/dlabiznesu/propozycje-gastronomiczne.html',
		   'Pakiety konferencyjne' => SITE_PATH.'/'.$data['lang'].'/dlabiznesu/pakiety-konferencyjne.html',
	   ),
 
   $atrakcje = array(
		   'AndersSpa' => SITE_PATH.'/'.$data['lang'].'/atrakcje/andersspa.html',
		   'W hotelu' => SITE_PATH.'/'.$data['lang'].'/atrakcje/w-hotelu.html',
		   'Pod gołym niebem' => SITE_PATH.'/'.$data['lang'].'/atrakcje/pod-golym-niebem.html',
		   'Inne atrakcje' => SITE_PATH.'/'.$data['lang'].'/atrakcje/inne-atrakcje.html',
		   'Nasze imprezy' => SITE_PATH.'/'.$data['lang'].'/atrakcje/nasze-imprezy.html',
	   ),
	$hotel = array(
		   'Historia hotelu' => SITE_PATH.'/'.$data['lang'].'/ohotelu/historia-hotelu.html',
		   'Położenie' => SITE_PATH.'/'.$data['lang'].'/ohotelu/polozenie.html',
		   'Atrakcje w regionie' => SITE_PATH.'/'.$data['lang'].'/ohotelu/atrakcje-w-regionie.html',
	   ),
   );
echo '
<div id="menu">
	<span onmouseover="MainMenu(0, 1, 1)" onmouseout="MainMenu(0, 0, 1)" class="cursor">
	   <a onfocus="blur();" href="#"><img id="m0" src="gfx/hotel.gif" alt="" /></a>
   </span>
   <span onmouseover="MainMenu(1, 1, 1)" onmouseout="MainMenu(1, 0, 1)" class="cursor">
	   <a onfocus="blur();" href="#"><img id="m1" src="gfx/centrum.gif" alt="" /></a>
   </span>
   <span onmouseover="MainMenu(2, 1, 1)" onmouseout="MainMenu(2, 0, 1)" class="cursor">
	   <a onfocus="blur();" href="#"><img id="m2" src="gfx/noclegi.gif" alt="" /></a>
   </span>
   <span onmouseover="MainMenu(3, 1, 1)" onmouseout="MainMenu(3, 0, 1)" class="cursor">
	   <a onfocus="blur();" href="#"><img id="m3" src="gfx/gastronomia.gif" alt="" /></a>
   </span>
   <span onmouseover="MainMenu(4, 1, 1)" onmouseout="MainMenu(4, 0, 1)" class="cursor">
	   <a onfocus="blur();" href="#"><img id="m4" src="gfx/biznes.gif" alt="" /></a>
   </span>
   <span onmouseover="MainMenu(5, 1, 1)" onmouseout="MainMenu(5, 0, 1)" class="cursor">
	   <a onfocus="blur();" href="#"><img id="m5" src="gfx/atrakcje.gif" alt="" /></a>
   </span>
   <span onmouseover="MainMenu(6, 1, 0)" onmouseout="MainMenu(6, 0, 0)" class="cursor">
	   <a onfocus="blur();" href="#"><img id="m6" src="gfx/cennik.gif" alt="" /></a>
   </span>
   <span onmouseover="MainMenu(7, 1, 0)" onmouseout="MainMenu(7, 0, 0)" class="cursor">
	   <a onfocus="blur();" href="#"><img id="m7" src="gfx/kontakt.gif" alt="" /></a>
   </span>';
 
for($i=0; $i<7; $i++){
   echo '
   <div id="sbm_'.$i.'" class="sbm-z" onmouseover="MainMenu('.$i.', 1, 1)" onmouseout="MainMenu('.$i.', 0, 1)">
	   <div class="menu_f">';
 
	   foreach($mainMenu[$i] as $key => $value)
		   echo '
		   <div class="submenu_item">
			   <a onfocus="blur();" href="'.$value.'" title="'.$key.'">
				   &raquo; '.$key.'
			   </a>
		   </div>';
	   
	   echo '</div></div>';
}
echo '</div></body></html>';
?>
[PHP] pobierz, plaintext

java script:

Kod

sbm_0_img = new Image;
sbm_0_img.src = 'gfx/hotel2.gif';

sbm_1_img = new Image;
sbm_1_img.src = 'gfx/centrum2.gif';

sbm_2_img = new Image;
sbm_2_img.src = 'gfx/noclegi2.gif';

sbm_3_img = new Image;
sbm_3_img.src = 'gfx/gastronomia2.gif';

sbm_4_img = new Image;
sbm_4_img.src = 'gfx/biznes2.gif';

sbm_5_img = new Image;
sbm_5_img.src = 'gfx/atrakcje2.gif';

sbm_6_img = new Image;
sbm_6_img.src = 'gfx/cennik2.gif';

sbm_7_img = new Image;
sbm_7_img.src = 'gfx/kontakt2.gif';

sbm_0_off_img = new Image;
sbm_0_off_img.src = 'gfx/hotel.gif';

sbm_1_off_img = new Image;
sbm_1_off_img.src = 'gfx/centrum.gif';

sbm_2_off_img = new Image;
sbm_2_off_img.src = 'gfx/noclegi.gif';

sbm_3_off_img = new Image;
sbm_3_off_img.src = 'gfx/gastronomia.gif';

sbm_4_off_img = new Image;
sbm_4_off_img.src = 'gfx/biznes.gif';

sbm_5_off_img = new Image;
sbm_5_off_img.src = 'gfx/atrakcje.gif';

sbm_6_off_img = new Image;
sbm_6_off_img.src = 'gfx/cennik.gif';

sbm_7_off_img = new Image;
sbm_7_off_img.src = 'gfx/kontakt.gif';

function MainMenu(id, action, sub){
    if (sub == 1) {
        submenu_id = eval('document.getElementById ? document.getElementById(\'sbm_'+id+'\') : document.all.sbm_'+id);
    }
    submenu_img = eval('document.getElementById ? document.getElementById(\'m'+id+'\') : document.all.m'+id);
    if (action == 1){
        if (sub == 1){
            submenu_id.className = 'sbm_'+id;
        }

        submenu_img.src = eval('sbm_'+id+'_img.src');
    }
    else{
        if (sub == 1){
            submenu_id.className = 'sbm-z';
        }
        submenu_img.src = eval('sbm_'+id+'_off_img.src');
    }
}

css:

Kod

body {font:11px;}

p {
text-align:justify;
padding:10px;
margin:0;
line-height:1.3em;
text-indent:20px;
}

p:first-letter {
font-size:11pt;
font-weight:bold;
}

p.left {
float:left;
display:inline;
}

p.right {
float:right;
display:inline;
}

p.right input {
border:0;
}

a:link, a:visited, a:active {
color: #e2dcce;
font-weight: normal;
text-decoration: none;
}

a:hover {
color: #fff;
font-weight: normal;
text-decoration: underline;
}

img {
border:0;
margin:0;
padding:0;
}

#m1, #m2, #m3, #m4, #m5, #m6, #m7, #m0 {
float:left;
}

.cursor {
cursor:pointer;
}

.image {
border:0;
margin:10px 0 0 0;
text-align:center;
}

.sbm-z {display:none;}

#sbm_0 {position: absolute; top:25px; width: 270px; margin:0 0 0 0; padding:18px 0 0 2px; text-align: left;}
#sbm_1 {position: absolute; top:25px; width: 280px; margin:0 0 0 89px; padding-top: 18px; text-align: left;}
#sbm_2 {position: absolute; top:25px; width:400px; margin:0 0 0 100px; padding-top: 18px; text-align: left;}
#sbm_3 {position: absolute; top:25px; width:270px; margin:0 0 0 150px; padding-top: 18px; text-align: left;}
#sbm_4 {position: absolute; top:25px; width: 270px; margin:0 0 0 200px; padding-top: 18px; text-align: left;}
#sbm_5 {position: absolute; top:25px; width:270px; margin:0 0 0 360px; padding-top: 18px; text-align: left;}

.submenu_item {
height: 24px;
padding-top: 2px;
padding-left:6px;
padding-right:6px;
background-color: #364331;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
text-align: left;
line-height:23px;
}

i teraz tak:

Działaniem skryptu ma być:
1.) po najechaniu na grafike w menu ma się podstawić inna grafika i otworzyć rozwijane menu
2.) po odjechaniu z grafiki w menu ma się wyświetlić grafika początkowa i schować rozwijane menu.

Wszystko pięknie działa ale IE się buntuje i w ogole nic nie chce interpretowac tego.
Pomożecie

PS. Sorki za dłuugi kod ale chcialem to jak najdokładniej przedstawić (wystarczy wżucić kod na serwer i dać jakies przykladowe grafiki by zobaczyc o co chodzi)

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.