13 svar · 466 visningar · startad av [AMD]Zmaster
Jag håller på med en sida, och menyn där ska vara som flikar, den som man är inne på "flyter" samman med en linje nedanför, som typ på www.apple.com, fast lite enklare, bifogar bild på en enkel skiss, ska ju va snyggare sen, men ni förstår vad jag menar.
Hur gör jag detta på bästa sätt?
Man kan göra det på väldigt många olika sätt, det beror helt på vad man kan. Ex. Fireworks, Flash, Shockwave, JavaScript, ASP, PHP.
I dreamweaver finns det en mouseover funktioner så att när du för pekaren över ett fält så kommer bilden att bytas. Ta gärna en titt på Fireworks, där man lätt kan snickra ihop en sådan meny du önskar.
Komplettera gärna med vad du kan / har tillgång till för programspråk eller program så blir det lättare att hjälpa dig.
/Johnny
Mouseover är ju inte direkt samma sak, för när jag klickar på en annan ska den som va "markerad" bli som de andra...alltså uppbyggt av bilder va?
Kan html, gör det mesta i Golive dock...vill helst att det ska vara vanlig html som alla browsers/operativsystem klarar
Har för mig att man kan använda lager-funktioner bra i GoLive? Isåfall så kan du ju lösa det med olika lager som du gör synliga vid olika tillfällen. Eller så letar du upp en bra JavaScripts tutorial.
/Johnny
Proton skrev:
Har för mig att man kan använda lager-funktioner bra i GoLive? Isåfall så kan du ju lösa det med olika lager som du gör synliga vid olika tillfällen. Eller så letar du upp en bra JavaScripts tutorial.
/Johnny
Men lager sätter man ju bestämd position på, inte typ i mitten...så det blir ju felplacerat beroende på upplösning man kör, eller?
Här kommer koden till en sida som jag har skrivit. Den visar flikar som fungerar som www.apple.com. När du har klickat på en sida så kan du välja att spara ett värde i en cookie så att rätt flik visas även om du kör refresh. Den har även en mouseover funktion som gör fliken tex lite ljusare när du håller muspekaren över den...
Cookie inkluden hittar du på: www.jojoxx.net.
OBS! Jag har klippt ut koden lite vårdslöst så det är en del fel här i koden. Sidan var för lång för att få plats... ;)
![[AMD]Zmasters avatar](/av/3411.gif)
<!---=== Includerar cookieskripten ===--->
<script language="JavaScript" src="lib_cookies.js"></script>
<script language="JavaScript">
function KillCookie(){
var kaka = new Cookie("ValdKnapp", "")
kaka.set();
}</script>
<SCRIPT Language="JavaScript">
// Laddar bilderna //
button1_out=new Image(); button1_over=new Image(); button1_clicked=new Image();
button1_out.src="tab_start0.gif";
button1_over.src="tab_start1.gif";
button1_clicked.src="tab_start2.gif";
// Denna sida ska laddas när man klickar på knappen //
// button1_url = "index2.html"
button2_out=new Image(); button2_over=new Image(); button2_clicked=new Image();
button2_out.src="tab_pro_serv0.gif";
button2_over.src="tab_pro_serv1.gif";
button2_clicked.src="tab_pro_serv2.gif";
// Denna sida ska laddas när man klickar på knappen //
// button2_url = "/tab_products/products_start.asp"
button3_out=new Image(); button3_over=new Image(); button3_clicked=new Image();
button3_out.src="tab_corporate0.gif";
button3_over.src="tab_corporate1.gif";
button3_clicked.src="tab_corporate2.gif";
// Denna sida ska laddas när man klickar på knappen //
// button3_url = "/tab_corporate/corporate_start.asp"
</script>
<body onunload="KillCookie()" vlink=blue background=bak_above_iar4.gif bgcolor="#FFE000"><base target=workFrame>
<!--- Startbilderna på knapparna --->
<!--- Används mellanslag så blir det mellanslag mellan bilderna i MSIE. Där av den LÅÅÅNGA raden --->
<table cellpadding=0 cellspacing=0 border=0><td>
<img src="tab_short_stop.gif"><A href="index2.html" onMouseOver="bilden_in(1);return true" onMouseOut="bilden_out(1);return true" onClick="funRedirect(1)"><img border=0 src="tab_start1.gif" name=flik1></a><!'''''2'''''''><img border=0 src="tab_short_stop_1px.gif"><img border=0 src="tab_short_stop_1px.gif"><A href="/tab_products/products_start.asp" onMouseOver="bilden_in(2);return true" onMouseOut="bilden_out(2);return true" onClick="funRedirect(2)"><img border=0 src="tab_pro_serv0.gif" name=flik2></a><!'''''3'''''''><img border=0 src="tab_short_stop_1px.gif"><img border=0 src="tab_short_stop_1px.gif"><A href="/tab_corporate/corporate_start.asp" onMouseOver="bilden_in(3);return true" onMouseOut="bilden_out(3);return true" onClick="funRedirect(3)"><img border=0 src="tab_app-serv0.gif" name=flik3></a><!''''''4'''''''><img border=0 src="tab_short_stop_1px.gif"><img border=0 src="tab_short_stop_1px.gif"><A href="/tab_offices/offices_index.html" onMouseOver="bilden_in(4);return true" onMouseOut="bilden_out(4);return true" onClick="funRedirect(4)"><img border=0 src="tab_corporate0.gif" name=flik4></a><!''''''5'''''''><img border=0 src="tab_short_stop_1px.gif"><img border=0 src="tab_short_stop_1px.gif"><A href="/tab_log/log_start.asp" onMouseOver="bilden_in(5);return true" onMouseOut="bilden_out(5);return true" onClick="funRedirect(5)"><img border=0 src="tab_office0.gif" name=flik5></a><!''''''6'''''''><img src="tab_short_stop.gif"><img src="tab_short_stop.gif"><A href="http://www.iar.com" onMouseOver="bilden_in(6);return true" onMouseOut="bilden_out(6);return true" onClick="funRedirect(6)"><img border=0 src="tab_log0.gif" name=flik6></a><!''''''7'''''''><img src="tab_short_stop.gif"><A href="http://salescorner.iar.se" onMouseOver="bilden_in(7);return true" onMouseOut="bilden_out(7);return true" onClick="funRedirect(7)"><img border=0 src="tab_extranet_salescorner0.gif" name=flik7></a><!''''''8'''''''><img src="tab_short_stop.gif"><A href="http://e-sales.iar.se" onMouseOver="bilden_in(8);return true" onMouseOut="bilden_out(8);return true" onClick="funRedirect(8)"><img border=0 src="tab_extranet_e-sales0.gif" name=flik8></a>
</form>
</BODY></HTML>
<script language="JavaScript">
// VISAR RÄTT KNAPP VID RELOAD AV BROWSERN //
varValdKnapp = Cookie.get("ValdKnapp")
if (varValdKnapp == ""){
varValdKnapp = 0
}
funRedirect(varValdKnapp)
// OM KAKAN = 0 SÅ SKA DEN TAS BORT //
if (varValdKnapp == "0"){
KillCookie()
}
// VISAR KNAPP BEROENDE PÅ ONCLICK //
function funRedirect(num){
if (num == 0){
// Skapa kaka //
var kaka = new Cookie("ValdKnapp", "0")
//kaka.expires = 5
kaka.set();
document.flik1.src = button1_out.src;
document.flik2.src = button2_out.src;
document.flik3.src = button3_out.src;
document.flik4.src = button4_out.src;
document.flik5.src = button5_out.src;
document.flik6.src = button6_out.src;
document.flik7.src = button7_out.src;
document.flik8.src = button8_out.src;
document.flik9.src = button9_out.src;
document.flik10.src = button10_out.src;
document.flik11.src = button11_out.src;
document.flik12.src = button12_out.src;
varValdKnapp = num
}
if (num == 1){
// Skapa kaka //
var kaka = new Cookie("ValdKnapp", "1")
//kaka.expires = 5
kaka.set();
document.flik1.src = button1_clicked.src;
document.flik2.src = button2_out.src;
document.flik3.src = button3_out.src;
document.flik4.src = button4_out.src;
document.flik5.src = button5_out.src;
document.flik6.src = button6_out.src;
document.flik7.src = button7_out.src;
document.flik8.src = button8_out.src;
document.flik9.src = button9_out.src;
document.flik10.src = button10_out.src;
document.flik11.src = button11_out.src;
document.flik12.src = button12_out.src;
varValdKnapp = num
//parent.workFrame.location=button1_url
}
if (num == 2){
// Skapa kaka //
var kaka = new Cookie("ValdKnapp", "2")
//kaka.expires = 5
kaka.set();
document.flik1.src = button1_out.src;
document.flik2.src = button2_clicked.src;
document.flik3.src = button3_out.src;
document.flik4.src = button4_out.src;
document.flik5.src = button5_out.src;
document.flik6.src = button6_out.src;
document.flik7.src = button7_out.src;
document.flik8.src = button8_out.src;
document.flik9.src = button9_out.src;
document.flik10.src = button10_out.src;
document.flik11.src = button11_out.src;
document.flik12.src = button12_out.src;
varValdKnapp = num
//parent.workFrame.location=button2_url
}
if (num == 3){
// Skapa kaka //
var kaka = new Cookie("ValdKnapp", "3")
//kaka.expires = 5
kaka.set();
document.flik1.src = button1_out.src;
document.flik2.src = button2_out.src;
document.flik3.src = button3_clicked.src;
document.flik4.src = button4_out.src;
document.flik5.src = button5_out.src;
document.flik6.src = button6_out.src;
document.flik7.src = button7_out.src;
document.flik8.src = button8_out.src;
document.flik9.src = button9_out.src;
document.flik10.src = button10_out.src;
document.flik11.src = button11_out.src;
document.flik12.src = button12_out.src;
varValdKnapp = num
//parent.workFrame.location=button3_url
}
}
//alert ("varValdKnapp = " +varValdKnapp)
function bilden_in(num){ // Onmouse over and out. Skippar vald bild
if (varValdKnapp != num){ // Om iconen tidigare är vald händer INGET.
// alert (num);
if (num == 1){
document["flik" +num].src=button1_over.src
}
if (num == 2){
document["flik" +num].src=button2_over.src
}
if (num == 3){
document["flik" +num].src=button3_over.src
}
if (num == 4){
document["flik" +num].src=button4_over.src
}
if (num == 5){
document["flik" +num].src=button5_over.src
}
if (num == 6){
document["flik" +num].src=button6_over.src
}
if (num == 7){
document["flik" +num].src=button7_over.src
}
if (num == 8){
document["flik" +num].src=button8_over.src
}
if (num == 9){
document["flik" +num].src=button9_over.src
}
if (num == 10){
document["flik" +num].src=button10_over.src
}
if (num == 11){
document["flik" +num].src=button11_over.src
}
if (num == 12){
document["flik" +num].src=button12_over.src
}
}
}
function bilden_out(num){ // Onmouse over and out. Skippar vald bild
if (varValdKnapp != num){ // Om iconen INTE tidigare är vald
//alert (num);
if (num == 1){
document["flik" +num].src=button1_out.src
}
if (num == 2){
document["flik" +num].src=button2_out.src
}
if (num == 3){
document["flik" +num].src=button3_out.src
}
if (num == 4){
document["flik" +num].src=button4_out.src
}
if (num == 5){
document["flik" +num].src=button5_out.src
}
if (num == 6){
document["flik" +num].src=button6_out.src
}
if (num == 7){
document["flik" +num].src=button7_out.src
}
if (num == 8){
document["flik" +num].src=button8_out.src
}
if (num == 9){
document["flik" +num].src=button9_out.src
}
if (num == 10){
document["flik" +num].src=button10_out.src
}
if (num == 11){
document["flik" +num].src=button11_out.src
}
if (num == 12){
document["flik" +num].src=button12_out.src
}
}
}
</SCRIPT>
Du kan inte ge mig direktlänk till hela fungerande scriptet ? :)
Kontakta mig på: mattiasnordin@tjohoo.se så ska jag maila det till det. Jag har det nämligen inte på den datorn jag sitter på just nu.
Mvh
Mattias
Skickat iväg ett mail...
Ännu inte fått nått mail =/
Sorry...
Är det något liknande detta du letar efter?
Exempel på menysystem med flikar
Filerna kommer med posten...
Är det inte bättre att lägga in koden här så att fler kan få hjälp av denna tråd om det är någon mer som söker efter samma sak?
Det är liksom så ett forum är tänkt att fungera. ;)
Visst ska man dela med sig av det man kan. Frågan är hur mycket tid man ska lägga ner på att skala ner koden så att den får plats att klippa in i webforums formulär... Det hade varit trevligt med ett litet javascript som visar hur många tecken man har skrivit så att man blir förvarnad innan man slår i taket!
Tredje försöket att infoga koden kommer här...
Håll till godo :-)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<STYLE TYPE="TEXT/CSS">
<!--
A:active {color:white}
A:visited {color:blue}
A:link {color:blue}
A:hover {color:green}
//-->
</STYLE>
<TITLE>Kodexempel skrivet av Mattias Nordin</TITLE>
<!---=== Includerar cookieskripten ===--->
<script language="JavaScript" src="lib_cookies.js"></script>
<script language="JavaScript">
function KillCookie(){
var kaka = new Cookie("ValdKnapp", "")
kaka.set();
}</script>
<SCRIPT Language="JavaScript">
// Laddar bilderna //
button1_out=new Image(); button1_over=new Image(); button1_clicked=new Image();
button1_out.src="tab_start0.gif";
button1_over.src="tab_start1.gif";
button1_clicked.src="tab_start2.gif";
// Denna sida ska laddas när man klickar på knappen //
button1_url = "startsida1.html"
button2_out=new Image(); button2_over=new Image(); button2_clicked=new Image();
button2_out.src="tab_pro_serv0.gif";
button2_over.src="tab_pro_serv1.gif";
button2_clicked.src="tab_pro_serv2.gif";
// Denna sida ska laddas när man klickar på knappen //
button2_url = "knapp2.html"
button3_out=new Image(); button3_over=new Image(); button3_clicked=new Image();
button3_out.src="tab_corporate0.gif";
button3_over.src="tab_corporate1.gif";
button3_clicked.src="tab_corporate2.gif";
// Denna sida ska laddas när man klickar på knappen //
button3_url = "http://mattiasnordin.net"
</script>
<body !onUnload="KillCookie()" vlink=blue background=bak_above_iar4.gif bgcolor="#FFE000"><base target=workFrame>
<!--- Startbilderna på knapparna --->
<br>
<table cellpadding=0 cellspacing=0 border=0><td>
<img src="tab_short_stop.gif"><img src="tab_short_stop.gif"><img src="tab_short_stop.gif"><A !href="index2.html" onMouseOver="bilden_in(1);return true" onMouseOut="bilden_out(1);return true" onClick="funRedirect(1)"><img border=0 src="tab_start1.gif" name=flik1></a><!'''''2'''''''><img border=0 src="tab_short_stop_1px.gif"><img border=0 src="tab_short_stop_1px.gif"><A !href="/tab_products/products_start.asp" onMouseOver="bilden_in(2);return true" onMouseOut="bilden_out(2);return true" onClick="funRedirect(2)"><img border=0 src="tab_pro_serv0.gif" name=flik2></a><!'''''3'''''''><img border=0 src="tab_short_stop_1px.gif"><img border=0 src="tab_short_stop_1px.gif"><A !href="/tab_corporate/corporate_start.asp" onMouseOver="bilden_in(3);return true" onMouseOut="bilden_out(3);return true" onClick="funRedirect(3)"><img border=0 src="tab_app-serv0.gif" name=flik3></a><img border=0 src="tab_right_longtop3.gif"><br></td>
</table><br>
<script language="JavaScript">
// VISAR RÄTT KNAPP VID RELOAD AV BROWSERN //
varValdKnapp = Cookie.get("ValdKnapp")
if (varValdKnapp == ""){
varValdKnapp = 1
}
funRedirect(varValdKnapp)
// OM KAKAN = 0 SÅ SKA DEN TAS BORT //
if (varValdKnapp == "0"){
KillCookie()
}
// VISAR KNAPP BEROENDE PÅ ONCLICK //
function funRedirect(num){
if (num == 0){
// Skapa kaka //
var kaka = new Cookie("ValdKnapp", "0")
kaka.expires = 5
kaka.set();
document.flik1.src = button1_out.src;
document.flik2.src = button2_out.src;
document.flik3.src = button3_out.src;
varValdKnapp = num
}
if (num == 1){
// Skapa kaka //
var kaka = new Cookie("ValdKnapp", "1")
kaka.expires = 5
kaka.set();
document.flik1.src = button1_clicked.src;
document.flik2.src = button2_out.src;
document.flik3.src = button3_out.src;
varValdKnapp = num
parent.workFrame.location=button1_url
}
if (num == 2){
// Skapa kaka //
var kaka = new Cookie("ValdKnapp", "2")
kaka.expires = 5
kaka.set();
document.flik1.src = button1_out.src;
document.flik2.src = button2_clicked.src;
document.flik3.src = button3_out.src;
varValdKnapp = num
parent.workFrame.location=button2_url
}
if (num == 3){
// Skapa kaka //
var kaka = new Cookie("ValdKnapp", "3")
kaka.expires = 5
kaka.set();
document.flik1.src = button1_out.src;
document.flik2.src = button2_out.src;
document.flik3.src = button3_clicked.src;
varValdKnapp = num
parent.workFrame.location=button3_url
}
}
//alert ("varValdKnapp = " +varValdKnapp)
function bilden_in(num){ // Onmouse over and out. Skippar vald bild
if (varValdKnapp != num){ // Om iconen tidigare är vald händer INGET.
// alert (num);
if (num == 1){
document["flik" +num].src=button1_over.src
}
if (num == 2){
document["flik" +num].src=button2_over.src
}
if (num == 3){
document["flik" +num].src=button3_over.src
}
}
}
function bilden_out(num){ // Onmouse over and out. Skippar vald bild
if (varValdKnapp != num){ // Om iconen INTE tidigare är vald
//alert (num);
if (num == 1){
document["flik" +num].src=button1_out.src
}
if (num == 2){
document["flik" +num].src=button2_out.src
}
if (num == 3){
document["flik" +num].src=button3_out.src
}
}
}
</SCRIPT>
</BODY></HTML>