Hejsan :)
Jag har sökt, både här på wF och googlat runt, och trodde att jag lyckats lösa det, men jag är tydligen inte tillräckligt bra på javascript för at tknäcka denna nöten.
Jag har en sida, och på sidan ett lager. Detta är per default dolt. I lagret ligger en flashfilm. Lagret har jag positionerat ut i mitten av sidan.
Tyvärr ligger där på mitten av sidan ett formulär i ett annat lager, synligt.
Och när jag nu gör flash-lagret synligt så lyser <select> rutan igenom.
Och jag förstår ju hur den ?enda? lösningen fungerar som innebär att man döljer <select> rutan.
Sättet jag tar fram det dolda flash-lagret är genom att utnyttja höger musknapp, enligt ett script som jag för lite sedan fick hjälp med här. Och när detta lagret då skall fram vill jag ju dölja det underliggande lagret. Och sedan, när onmouseout aktiveras på flashlagret, så skall det lagret döljas igen, och då skall det underliggande lagret åter visas.
Att visa och dölja flashlagret fungerar utmärkt, men resten funkar mindre bra. För att ytterligare spå på omständigheten med det här problemet så skall detta experiment antagligen (om jag får det att fungera) att integreras på fler sidor, som kanske, eller kanske inte, har en <select> ruta som behöver döljas. (Denna experimentsidan har ju det, så åtminstone en sida kommer ju med säkerhet att ha det, men iaf.) så dessutom skulle jag behöva köra en koll om det finns ett lager under flashlagret, som innehåller ett formulär med en <select> ruta.
Jag tänkte att det säkert räcker med att man tänker efter lite när man bygger sidan, så att om man har ett lager som ligger på samma plats, och som kan tänkas störa flashlagret, så lägger man bara till en id-tagg på underliggande "select"-lagret och döljer hela lagret medans flash-lagret visas.
Alltså skulle man då bara behöva kolla om ett lager med ett specifikt id (samma för alla sidor som har ett select-rute lager på samma position som flashlagret) existerar, och om det gör det, så anropa en funktion för att dölja det lagret samtidigt som flashlagret kallas fram.
Och vise versa när flashlagret skall döljas.
Går det att göra så som jag tänkt?
Det hela kanske är så lätt som att man måste köra display:none och helt typ ta bort select-lagret medans flash-lagret visas... men har ingen riktig syntax för hur man skulle göra det.
Så iaf. lite kod.
experimentsidan:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<link rel="stylesheet" href="skin/rex/style.css" />
<link rel="stylesheet" href="skin/rex/obj.flash.css" />
<link rel="stylesheet" href="skin/rex/obj.settings.css" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script src="js/flash.js"></script>
<script src="js/layerlib.js"></script>
<script src="js/page.refresh.js"></script>
</head>
<body>
<div class="flash" id="flash" onMouseOut="hideLayer('flash'); showUnder();">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
width="500" height="500"
onMouseOver="showLayer('flash')"
onMouseOut="showUnder();">
<param name="movie" value="flash.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<embed src="flash.swf" quality="high"
wmode="transparent"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash"
width="500" height="500"
onMouseOver="showLayer('flash')"
onMouseOut="showUnder();"></embed>
</object>
</div>
<div class="objChangeSkin" id="underFlash">
<form action="changeSkin.php" method="post">
<select name="skin" class="objChangeSkin" id="underFlash">
<option>Select a skin</option>
<option>-------------</option>
</select><br />
<input type="submit" value="Change skin" />
</form>
</div>
</body>
</html>
Anledningen till att jag lagt onmouseover på object och embed taggarna är för att lagret inte skall döljas (onmouseout på lagret när onmouseover på <object>/<embed>)
flash.js
/*
Stort tack till Peter S @ [url]www.webforum.nu[/url] för
högerklicks-koden.
*/
document.oncontextmenu = function(e){
var node = window.event ? event.srcElement.tagName : e.target.nodeName;
if (node != "A" && node != "IMG") {
showLayer('flash');
return false;
}
}
if(document.layers) {
window.captureEvents(Event.MOUSEDOWN);
window.onmousedown = function(e){
if (e.target==document){
showLayer('flash');
return false;
}
}
} else {
if (!document.getElementById) {
document.onmousedown = function(){
var node = event.tagName;
if (event.button==2 && node != "A" && node != "IMG"){
showLayer('flash');
hideUnder();
return false;
}
}
}
}
function hideUnder()
{
var element = document.getElementById('underFlash');
if (element.style.visibility == "show" || element.style.visibility == "visible") {
hideLayer('underFlash');
}
}
function showUnder()
{
var element = document.getElementById('underFlash');
if (element.style.visibility == "hide" || element.style.visibility == "hidden") {
showLayer('underFlash');
}
}
Med denna kod ovan, så får jag inga felmeddelanden i MSIE, men samtidigt så försvinner inte "underFlash"-lagret så jag antar att antingen så hittar inte scriptet vad det skall dölja, eller också så räcker det inte med att dölja (visibility=hidden/hide) utan man behöver verkligen köra display=none, eller hur nu den syntaxen ser ut.
Om det är till någon hjälp så behöver den här lösningen endast fungera till MSIE då Firefox och Mozilla inte har problem med att låta <select> rutan ligga under flashlagret. (Opera vill inte vara med och leka alls ö.h.t så där får jag ändå bygga en helt annan lösning med bara html...)
Nåväl, om jag inte varit tydlig på något sätt, eller ni behöver någon mer information så är det bara att fråga. =)
Tack på förhand
MVH Patrik
/r: kapade koden på några ställen, över flera rader, så att sidan inte blev så hiskeligt bred...