Ist das in HTML möglich ?

Dieses Thema im Forum "Webentwicklung" wurde erstellt von Banga, 12. April 2011 .

Schlagworte:
  1. 12. April 2011
    Hallo, vorweg: falls ihr Antwortet, bitte antwortet für einen HTML (bzw. allgemein Programmiersprachen) Noob.

    Ich habe euch ein Bild angehängt, ihr seht 3 verschieden eingefärbte Flächen, diese stellen Buttons da, desweiteren seht ihr 3 verschieden eingefärbte Konturen, diese stellen das Ende der Buttonfläche nach dem draufklicken dar.

    Die Frage: ist es möglich das in HTML (ohne Flash) umzusetzen ?
    Habe mit nem Freund drüber geredet und er meinte dass es problematisch wird da die Buttons links und rechts überlappen würden (wäre programmiertechnisch nicht möglich auch wenn sowieso nur ein Button sichtbar ist, beim klicken auf den anderen soll der zuvor geklickte ja wieder "verschwinden" bzw. sich auf seine alte Größe reduzieren.

    Auf die "ausgedehnte" Fläche des Buttons soll dann auch Text stehen.

    Wäre schön wenn man dass mit einem leichten "Bewegungseffekt" machen könnte, so dass der Button sich nicht apprupt vergrößert.

    Stellt euch bei den Kästchen in den Grautönen einfach Bilder vor, einige davon würden verdeckt werden nachdem man einen beliebigen Button angeklickt hat.

    Hoffe jemand versteht mich !

    Meine Verständniss Preview:
    {bild down}
     
    + Multi-Zitat Zitieren
  3. 12. April 2011
    AW: Ist das in HTML möglich ?

    Nur mit HTML? Nein.

    Es gibt zwar einige Effekte in HTML, allerdings ist nichts davon so smooth wie du dir das vorstellst.
     
    + Multi-Zitat Zitieren
  4. 12. April 2011
    AW: Ist das in HTML möglich ?

    Wie könnte man dass durch "minimalen" Input anderer Sprachen am besten angehen ?
    Flash darf aus technischen Gründen nicht benutzt werden, gibt es andere alternativen ?

    Javascript ? Mouseover ?

    EDIT:// Wenn man auf smoothness verzichten würde, wäre es möglich ? Es muss ja nicht mit 24bps nach oben ziehen wie in Flash, nur wärs schön wenns ohne den billigsten Mouseover auf Erden möglich wäre
     
    + Multi-Zitat Zitieren
  5. 12. April 2011
    AW: Ist das in HTML möglich ?

    Wieso nicht? Mit Javascript und HTML + CSS sehe ich da kein wirkliches Problem.
    (Okay, du bist denke ich mal nur von kompletten HTML ausgegangen. Ginge auch nur ohne ausfahreffekte.)

    Klick auf den "Button" bzw ein Bild. Ein Div an der Position wird "ausgefahren" um den Ausfahreffekt kümmert sich ein Framework und der z-Index wird geändert, damit das Bild oben drauf liegt.
     
    + Multi-Zitat Zitieren
  6. 12. April 2011
    AW: Ist das in HTML möglich ?

    Das meinte ich, ja. Mehr als ein einfachen Grafik exchange kriegste da wohl nicht hin, oder?

    Jup, onmouseover.
     
    + Multi-Zitat Zitieren
  7. 12. April 2011
    AW: Ist das in HTML möglich ?

    Könntest du mir das ganze evtl. als kleinen Beispiel Code zeigen ? - Falls es nicht zuviel Arbeit ist.

    Bin wie gesagt blutiger Anfänger. Werds mir natürlich erstmal selbst anschauen, hoffe die Dreamweaver CSS Palette ist recht selbsterklärend, von "z-Index" und "Framework" habe ich allerdings noch nichts gehört.

    @Slim: onmouseover wäre aber die billigste Variante die beim über den Button fahren einfach das Feld vergrößert und beim "verlassen" des Buttons wieder verkleinert (apruppt), richtig ?
     
    + Multi-Zitat Zitieren
  8. 12. April 2011
    AW: Ist das in HTML möglich ?

    das sollte mit html/css machbar sein. bewegungseffekt mit css3 und transitions auch kein problem.

    cross-browser auch mit html/css aber für nen effekt muss dann javascript her.

    @all: buttons haben auch :active (= geklickt bzw. focus) und :hover (= maus drauf)
    da gibt es etliche spielerein auf cssplay die diese zustände ausnutzen.
    -> zum teil ganze bildergalerien mit mehreren kategorien

    Stu Nicholls | CSSplay | CSS hover/click slideshow
    Stu Nicholls | CSSplay | A complex slide show
     
    + Multi-Zitat Zitieren
  9. 15. April 2011
    AW: Ist das in HTML möglich ?

    Sorry momentan kein guter Zeitpunkt. Bau dir doch erstmal das Grundgerüst dadran scheitert es erstmal. Danach kann man dir mit den CSS Befehlen viel besser weiterhelfen.
     
    + Multi-Zitat Zitieren
  10. 10. Mai 2011
    AW: Ist das in HTML möglich ?

    Hi, also das Webdesign ist komplett fertig, Grundfunktionen wurden auch schon von mir gecodet, was mir jetzt noch fehlt ist das besagte "Menü", was auch der Grund dieses Threads ist und der Einbau von Lightbox 2 (was ich einfach nicht hinbekomme), mir fehlen da leider einfach die Kentnisse um Zusammenhänge etc. zu verstehen, obwohl das auf der Lightbox Seite eigentlich gut beschrieben scheint.

    Könnte ich evtl. einem fähigen Coder mal meine Daten zukommen lassen damit er sich das ganze mal anschaut und mir auf der Basis des bereits vorhandenen Code sagt wie ichs am besten Anstelle ? Wäre echt nett, hättet grafisch auch was gut bei mir, falls ihr mal nen Flyer oder so braucht.
     
    + Multi-Zitat Zitieren
  11. 10. Mai 2011
    AW: Ist das in HTML möglich ?

    wie wäre es, wenn du teile von deinen code usw. postest und wir dir hier helfen.
    ich glaub das sollte für allen zugänglich sein, die ähnliche probleme haben und gerne
    die lösung wissen wollen.

    // edit lightbox 2
    ist eigentlich einfach.
    du bindest die nötigen dateien ein
    HTML:
    <script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
// css für's design
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    und nun einfach links erstellen, die auf deine dateien verweisen.
    HTML:
    <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
    das ist eigentlich schon alles
    so sieht das html aus:
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>lightbox 2</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>

<body>

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

</body>
</html>
    wenn du nun uns dein html zur verfügung stellst, dann zeigen wir gerne die einbindung usw.
     
    + Multi-Zitat Zitieren
  12. 10. Mai 2011
    AW: Ist das in HTML möglich ?

    Schon, nur verteile ich ungerne meine Real Daten quer durchs Internet, ich werd mal sehen wieviel Arbeit das ist es unkenntlich zu machen und hier dann editieren, falls sich bis dahin jemand anbieten würde, freue ich mich natürlich über eine PM.
     
    + Multi-Zitat Zitieren
  13. 10. Mai 2011
    AW: Ist das in HTML möglich ?

    HTML:
    <!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Giulianos Portfolio</title>

<style type="text/css">
<!--
body {
 background-image: url();
 background-color: #1D1D1D;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
 var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
 if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
 d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
 if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
 if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('Bilder/slice_05 Kopie.jpg','Bilder/slice_06 Kopie.jpg','Bilder/slice_08 Kopie.jpg','Bilder/slice_09 Kopie.jpg','Bilder/slice_12 Kopie.jpg','Bilder/slice_13 Kopie.jpg','Bilder/slice_14 Kopie.jpg','Bilder/slice_15 Kopie.jpg','Bilder/slice_16 Kopie.jpg','Bilder/slice_17 Kopie.jpg','Bilder/slice_19 Kopie.jpg','Bilder/slice_20 Kopie.jpg','Bilder/slice_21 Kopie.jpg','Bilder/slice_22 Kopie.jpg')">
<table width="1248" border="0" cellpadding="0" cellspacing="0" align="center">
 <!--DWLayoutTable-->
 <tr>
 <td width="208" height="118" valign="top"><img src="Bilder/head_02.jpg" width="208" height="118" border="0" usemap="#Map" /></td>
 <td width="208">&nbsp;</td>
 <td width="208">&nbsp;</td>
 <td width="208">&nbsp;</td>
 <td width="208">&nbsp;</td>
 <td width="208">&nbsp;</td>
 </tr>
 <tr>
 <td height="346" valign="top"><img src="Bilder/slice_03.jpg" width="208" height="346" /></td>
 <td valign="top"><a href="../../../../Eigene Dateien/Unbenannte Site 2/Lightbox2/images/pic_big_01.jpg" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image19','','Bilder/slice_05 Kopie.jpg',1)"><img src="Bilder/slice_05.jpg" name="Image19" width="208" height="346" border="0" id="Image19" /></a></td>
 
 <td valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image20','','Bilder/slice_06 Kopie.jpg',1)"><img src="Bilder/slice_06.jpg" name="Image20" width="208" height="346" border="0" id="Image20" /></a></td>
 <td valign="top"><img src="Bilder/slice_07.jpg" width="208" height="346" /></td>
 <td valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image21','','Bilder/slice_08 Kopie.jpg',1)"><img src="Bilder/slice_08.jpg" name="Image21" width="208" height="346" border="0" id="Image21" /></a></td>
 <td valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image22','','Bilder/slice_09 Kopie.jpg',1)"><img src="Bilder/slice_09.jpg" name="Image22" width="208" height="346" border="0" id="Image22" /></a></td>
 </tr>
 <tr>
 <td height="346" valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image23','','Bilder/slice_12 Kopie.jpg',1)"><img src="Bilder/slice_12.jpg" name="Image23" width="208" height="346" border="0" id="Image23" /></a></td>
 <td valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image24','','Bilder/slice_13 Kopie.jpg',1)"><img src="Bilder/slice_13.jpg" name="Image24" width="208" height="346" border="0" id="Image24" /></a></td>
 <td valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image25','','Bilder/slice_14 Kopie.jpg',1)"><img src="Bilder/slice_14.jpg" name="Image25" width="208" height="346" border="0" id="Image25" /></a></td>
 <td valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image26','','Bilder/slice_15 Kopie.jpg',1)"><img src="Bilder/slice_15.jpg" name="Image26" width="208" height="346" border="0" id="Image26" /></a></td>
 <td valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image27','','Bilder/slice_16 Kopie.jpg',1)"><img src="Bilder/slice_16.jpg" name="Image27" width="208" height="346" border="0" id="Image27" /></a></td>
 <td valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image28','','Bilder/slice_17 Kopie.jpg',1)"><img src="Bilder/slice_17.jpg" name="Image28" width="208" height="346" border="0" id="Image28" /></a></td>
 </tr>
 <tr>
 <td height="346" valign="top"><img src="Bilder/slice_18.jpg" width="208" height="346" /></td>
 <td valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image29','','Bilder/slice_19 Kopie.jpg',1)"><img src="Bilder/slice_19.jpg" name="Image29" width="208" height="346" border="0" id="Image29" /></a></td>
 <td valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image30','','Bilder/slice_20 Kopie.jpg',1)"><img src="Bilder/slice_20.jpg" name="Image30" width="208" height="346" border="0" id="Image30" /></a></td>
 <td valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image31','','Bilder/slice_21 Kopie.jpg',1)"><img src="Bilder/slice_21.jpg" name="Image31" width="208" height="346" border="0" id="Image31" /></a></td>
 <td valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image32','','Bilder/slice_22 Kopie.jpg',1)"><img src="Bilder/slice_22.jpg" name="Image32" width="208" height="346" border="0" id="Image32" /></a></td>
 <td valign="top"><img src="Bilder/slice_23.jpg" width="208" height="346" /></td>
 </tr>
</table>

<map name="Map" id="Map"><area shape="rect" coords="4,5,204,115" href="http://www.facebook.at" target="_blank" alt="Facebook" />
</map></body>
</html>
    Das ist der gesamte Code, hoffe du/ihr könnt was damit anfangen, bitte nicht zu sehr über den Code meckern, Dreamweaver und kaum Kentnisse machens möglich.
     
    + Multi-Zitat Zitieren
  14. 10. Mai 2011
    AW: Ist das in HTML möglich ?

    1. lade die dateien runter
    http://www.huddletogether.com/projects/lightbox2/releases/lightbox2.05.zip
    2. die ordner kopierst du zu deinen projekt
    3. einbinden
    HTML:
    <!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Giulianos Portfolio</title>

<style type="text/css">
<!--
body {
 background-image: url();
 background-color: #1D1D1D;
}
-->
</style>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script> // css für's design <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
...
    4. verlinkung
    HTML:
    ...
<body onload="MM_preloadImages('Bilder/slice_05 Kopie.jpg','Bilder/slice_06 Kopie.jpg','Bilder/slice_08 Kopie.jpg','Bilder/slice_09 Kopie.jpg','Bilder/slice_12 Kopie.jpg','Bilder/slice_13 Kopie.jpg','Bilder/slice_14 Kopie.jpg','Bilder/slice_15 Kopie.jpg','Bilder/slice_16 Kopie.jpg','Bilder/slice_17 Kopie.jpg','Bilder/slice_19 Kopie.jpg','Bilder/slice_20 Kopie.jpg','Bilder/slice_21 Kopie.jpg','Bilder/slice_22 Kopie.jpg')">
<table width="1248" border="0" cellpadding="0" cellspacing="0" align="center">
 <!--DWLayoutTable-->
 <tr>
 <td width="208" height="118" valign="top"><img src="Bilder/head_02.jpg" width="208" height="118" border="0" usemap="#Map" /></td>
 <td width="208">&nbsp;</td>
 <td width="208">&nbsp;</td>
 <td width="208">&nbsp;</td>
 <td width="208">&nbsp;</td>
 <td width="208">&nbsp;</td>
 </tr>
 <tr>
 <td height="346" valign="top"><a href="Bilder/slice_03.jpg" rel="lightbox[roadtrip]"><img src="Bilder/slice_03.jpg" width="208" height="346" /></a></td>
 <td valign="top"><a href="../../../../Eigene Dateien/Unbenannte Site 2/Lightbox2/images/pic_big_01.jpg" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image19','','Bilder/slice_05 Kopie.jpg',1)"><img src="Bilder/slice_05.jpg" name="Image19" width="208" height="346" border="0" id="Image19" /></a></td>
 
 <td valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image20','','Bilder/slice_06 Kopie.jpg',1)"><img src="Bilder/slice_06.jpg" name="Image20" width="208" height="346" border="0" id="Image20" /></a></td>
 <td valign="top"><a href="Bilder/slice_07.jpg" rel="lightbox[roadtrip]"><img src="Bilder/slice_07.jpg" width="208" height="346" /></a></td>
 <td valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image21','','Bilder/slice_08 Kopie.jpg',1)"><img src="Bilder/slice_08.jpg" name="Image21" width="208" height="346" border="0" id="Image21" /></a></td>
 <td valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image22','','Bilder/slice_09 Kopie.jpg',1)"><img src="Bilder/slice_09.jpg" name="Image22" width="208" height="346" border="0" id="Image22" /></a></td>
 </tr>
...
    das war's schon.
    so sollte der ablauf sein.
    was verlinkt und was geöffnet werden soll, bleibt dir überlassen.
     
    + Multi-Zitat Zitieren
  15. 13. Mai 2011
    AW: Ist das in HTML möglich ?

    was soll denn das ganze tabellen-zeug?

    ich hab mal dein bild oben ohne javascript umgesetzt:
    http://murdoc.eu/rr/banga/
     
    + Multi-Zitat Zitieren
  16. 24. Mai 2011
    AW: Ist das in HTML möglich ?

    Ich bins nochmal, ich habe versucht die Lightbox so einzubauen wie beschrieben, allerdings wird mir einfach nicht klar wie ich das auf die anderen Bilder übertrage und wieso der Mouseover Effekt weggeht.

    Könnte ich euch ein .RAR Archiv hochladen, mit Bildern und Index.html und ihr baut mir das ein ?
    Ich weiss das ist nicht gerne gesehen allerdings fehlt mir jegliches Verständniss um das sauber hinzubekommen, wäre also nett wenn sich jemand bereit erklärt, so wie von euch beschrieben sollte das eine 10-15 Minuten Arbeit sein, ihr hättet wie gesagt was gut bei mir, falls ihr irgendwann mal etwas braucht, grafisch.
     
    + Multi-Zitat Zitieren
  17. 24. Mai 2011
    AW: Ist das in HTML möglich ?

    lad es doch mal hoch, kein problem.
    aber die sache ist echt einfach:
    Code:
    <a href="Bilder/slice_03.jpg" rel="lightbox[roadtrip]"><img src="Bilder/slice_03.jpg" width="208" height="346" /></a>
    du hast ein bild oder text oder was auch immer:
    Code:
    <img src="bild_klein.jpg" />
oder
klick hier
    nun nur noch ein link mit rel anweisung, damit die lightbox weiß, dass das geöffnet werden soll.
    Code:
    <a href="bild_gross.jpg" rel="lightbox[roadtrip]"><img src="bild_klein.jpg" /></a>
oder
<a href="bild_gross.jpg" rel="lightbox[roadtrip]">klick hier</a>
     
    + Multi-Zitat Zitieren
  18. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.

Auf dieses Thema antworten