• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

neue seite/bild/video im bild öffnen

D

DrBasss

Neues Mitglied
ich habe ein bild eines players wie diesen
001.jpgdas original ist 995x822px
links und rechts sind je 4 buttons, in der mitte ein monitor in der grösse 640x480px
nun möchte ich alle 8 buttons mit verweissen belegen, so dass beim anklicken der buttons jeweils im monitor in der mitte entweder ein bild, ein video oder eine html seite sichtbar wird. und zwar so als würde das gerät dies wie in echt im monitor abspielen.
um die 8 buttons anklickbar zu machen verwende ich diesen code
Code: 
<img src="player.png" width="850" height="HÖHE" border="0" alt="Webradio" usemap="#Radio">
  <map name="RADIO">
    <area shape="rect" coords="34,115,107,165"
          href="loghg.png" alt="Play" title="Play">
    <area shape="rect" coords="34,175,107,220"
          href="ZIEL-RUL" alt="Play" title="Play">
    <area shape="rect" coords="34,230,107,275"
          href="ZIEL-RUL" alt="Play" title="Play">
    <area shape="rect" coords="34,285,107,330"
          href="ZIEL-RUL" alt="Play" title="Play">
    <area shape="rect" coords="735,115,820,165"
          href="ZIEL-RUL" alt="Play" title="Play">
    <area shape="rect" coords="735,175,820,220"
          href="ZIEL-RUL" alt="Play" title="Play">
    <area shape="rect" coords="735,230,820,275"
          href="ZIEL-RUL" alt="Play" title="Play">
    <area shape="rect" coords="735,285,820,330"
          href="ZIEL-RUL" alt="Play" title="Play">
könnte mir jemand behilflich sein diese html zu erstellen ? gedacht ist das ganze als unterseite einer homepage
 
Hast du auch irgendwo das Bild in Originalgrösse? Zum Einbinden und testen.
 
Ich habe dir mal ein Beispiel erstellt:
sample1.jpg

Ich habe dein Bild mit der Grösse von 850 Pixel verwendet, da wenn es grösser ist, es zu verpixelt aussah, dieses ist schon nicht super. Du kannst aber die Werte im CSS später anpassen.

Erst mal der Code:
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <title>Seitentitel</title>
        <meta charset="utf-8">
        <meta name="description" content="">
        <style>
        * { margin:0;padding:0; }
        div#Navibild {
            Position:relative;
            margin: 0 auto;
            width:850px;
            height:702px;
            font: 14px Arial;
        }
        ul#Tasten_links {
            position: absolute;
            top:160px;
            left:37px;
            width:78px;
            height:291px;
            
        }
        ul#Tasten_rechts {
            position: absolute;
            top:160px;
            left:736px;
            width:78px;
            height:291px;
         }
        ul#Tasten_links li,  ul#Tasten_links li a, ul#Tasten_rechts li,  ul#Tasten_rechts li a {
            display:block;
            list-style: none;
            vertical-align:middle;
            line-height:63px;
            text-align:center;
            height:63px;
            width:74px;
            margin-bottom:13px;
            color:rgb(153,204,51); 
            text-decoration: none;
            border:none;
            border-left:1px solid transparent;
        } 
        ul#Tasten_links li:hover, ul#Tasten_links a:hover{
            text-decoration: none; 
            color:rgb(102,255,51);
            background-color:rgba(0,0,0, .2); 
            text-shadow: 1px 1px 3px #85e68f;
            border-right:1px solid rgb(102,255,51);
        } 
        ul#Tasten_rechts li:hover, ul#Tasten_rechts a:hover{
            text-decoration: none; 
            color:rgb(102,255,51);
            background-color:rgba(0,0,0, .2); 
            text-shadow: 1px 1px 3px #85e68f;
            border-left:1px solid rgb(102,255,51);
        }   
        div#Bildschirm {
            position:absolute;
            left:150px;
            top:112px;
            width:554px;
            height:432px;
            overflow:hidden;
            border:none;
            color: rgb(255,255,102)
        }    
        </style>
    </head>
    <body>
        <div id="Navibild">
             <img src="24v5ms1.jpg" alt="" title="" border="0" height="702" width="850">
              <ul id="Tasten_links">
                  <li><a href="index.html">link1</a></li>
                  <li><a href="#nogo">link2</a></li>
                  <li><a href="#nogo">link3</a></li>
                  <li><a href="#nogo">link4</a></li>
              </ul> 
              <ul id="Tasten_rechts">
                  <li><a href="#nogo">link5</a></li>
                  <li><a href="#nogo">link6</a></li>
                  <li><a href="#nogo">link7</a></li>
                  <li><a href="#nogo">link8</a></li>
              </ul> 
              <div id="Bildschirm">
                  <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/LeHavre-Pont-du-Normandie_0673.jpg/800px-LeHavre-Pont-du-Normandie_0673.jpg" width="554">
                  <h2>Pont de Normandie </h2>
                  <p>Die Brücke der Normandie ist eine Schrägseilbrücke, die mit 856 m die größte Spannweite in Europa besitzt. 
                      Sie überquert die Seinemündung und verbindet Le Havre mit Honfleur auf dem linken Ufer im Süden. Die Brücke 
                      wurde in den Jahren 1988 bis 1994 gebaut.                                 
                      Insgesamt hat der 21,2 m breite Brückenzug eine Länge von 2141,25 m.  Die Durchfahrtshöhe für Schiffe beträgt 
                      bei HHW 52 m.
                      Die Brücke ist mautpflichtig und kostet für PKW 5,10 € (Stand: August 2011). Über sie verläuft die N1029 (E44).
                    </p>
              </div>   
        </div> 
    </body>
</html>

Beschreibung:
Ich habe dein Bild nicht als Hintergrundbild genommen sondern relativ positioniert und dann die Navigation rechts und links sowie den Content in der Mitte absolut positioniert.
Die Navigation ist mit einer Ungeordeneten Liste erstellt. Bei Hover wird der Hintergrund der Tasten schwarz mit 80% transparenz. Dadurch entsteht der Effekt das die Taste gedrückt wird. Bei Hover wird zusätzlich die Farbe geändert und um einen besseren Leuchteffekt zu erzeugen mit 1 Px Schatten versehen. Weiterhin wird der Linke oder rechte Border der LI auf gleiche Farbe gesetzt. Dadurch haben wir den Effekt als wenn die Taste gedrückt würde.

Im Contentbereich, hier ein Div mit Namen Bildschirm ist overflow auf hidden gesetzt, um die Scrollbalken auszublenden. Die könnte man wieder einblenden lassen, wenn gewünscht.
Der Contentbereich ist ebenfalls absolut positioniert.
Um nun den Umschalteffekt zu erreichen muss man einfach nur mehrere Seiten mit gleichem Aufbau erstellen und dann lediglich, den Inhalt im Div Bildschirm ändern, sowie die Links anpassen.

Man kann es auch mit Hintergrundbild im CSS machen. Dies ist nur ein Beispiel. Es gibt sicherlich auch andere Wege so was umzusetzen.
 
erst mal danke schön und dickes lob
nun noch eine frage. durch deine verkleinerung des bildes auf 850 px wird der monitobereich ja auch kleiner. wenn ich jetzt dort ein video mit den massen 640x480 anzeigen lassen will wird nur ein teilbereich des videos angeszeigt mit scrollbalken. gibt es da noch einen code um das video dann prozentual verkleinern zu können dass es komplett im monitorbereich zu sehen ist?
edit: ich habe das video derzeit per iframe eingebunden
 
ja klar. Du kannst doch die Grösse der Darstellung angeben. Es wird bei Vollbild ja auch einfach vergrössert.

Ich würde übrigens das Video-Element verwenden.

Alternative: Ich weiss ja nicht wo du dieses Bild her hast, aber evtl. gibt es davon auch eine grössere Variante, die du verkleinern kannst. Dieses Bild ist recht pixelig in der Darstellung. Das sieht man besonders an den Rundungen. Die Anpassungen an das Bild sind eigentlich keine grosse Sache. Ist lediglich ein Ausmessen der Punkte für die Tasten, sprich Navigation und das Bildschirmg Div.
 
nee grösser hab ich es nicht.
könntest du mir bitte die codezeilen hier posten damit das video komplett im monitor ist? bin da nicht so bewandert mit den codes. bin nur hobbybastler weil ich beruflich nicht die zeit hab mich intensiv damit zu beschäftigen. einiges vertsehe ich ja schon aber noch sehr begrenzt mein wissen
 
Ich zeige dir hier nur denn mittleren Teil. Der Rest der Seite bleibt ja gleich.
HTML: 
<div id="inhalt">                          
        <video id="mein_video" width="554" controls="controls" autobuffer="autobuffer">
            <source src="film.webm" type="video/webm">
            <source src="film.mp4" type="video/mp4">
            Zum Anzeigen des Videos bitte auf einen neueren Browser ausweichen.
        </video> 
    </div>

Dein Video muss im Format WebM und mp4 vorliegen.
in src dann film.webm durch dein Video ersetzen.
Das Video wird nicht in älteren Internet Explorer angezeigt, da diese Browser das nicht können.
 
das hat mich jetzt mehr verwirrt denn geholfen
1. <div id="inhalt"> müsste da nicht Navibild stehen statt inhalt damit es auch im monitor angezeigt wird
2. WebM sagt mir nix.... wollte videos aus youtube anzeigen lassen
 
Zum WebM lese hier: YouTube Videos als HTML5-Video einbinden - GoogleWatchBlog

du musst nur das iframe einbinden.
Ich zeige dir das an einem Beispiel:
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <title>Seitentitel</title>
        <meta charset="utf-8">
        <meta name="description" content="">
        <style>
        * { margin:0;padding:0; }
        div#Navibild {
            Position:relative;
            margin: 0 auto;
            width:850px;
            height:702px;
            font: 14px Arial;
        }
        ul#Tasten_links {
            position: absolute;
            top:160px;
            left:37px;
            width:78px;
            height:291px;
            
        }
        ul#Tasten_rechts {
            position: absolute;
            top:160px;
            left:736px;
            width:78px;
            height:291px;
         }
        ul#Tasten_links li,  ul#Tasten_links li a, ul#Tasten_rechts li,  ul#Tasten_rechts li a {
            display:block;
            list-style: none;
            vertical-align:middle;
            line-height:63px;
            text-align:center;
            height:63px;
            width:74px;
            margin-bottom:13px;
            color:rgb(153,204,51); 
            text-decoration: none;
            border:none;
            border-left:1px solid transparent;
        } 
        ul#Tasten_links li:hover, ul#Tasten_links a:hover{
            text-decoration: none; 
            color:rgb(102,255,51);
            background-color:rgba(0,0,0, .2); 
            text-shadow: 1px 1px 3px #85e68f;
            border-right:1px solid rgb(102,255,51);
        } 
        ul#Tasten_rechts li:hover, ul#Tasten_rechts a:hover{
            text-decoration: none; 
            color:rgb(102,255,51);
            background-color:rgba(0,0,0, .2); 
            text-shadow: 1px 1px 3px #85e68f;
            border-left:1px solid rgb(102,255,51);
        }   
        div#Bildschirm {
            position:absolute;
            left:150px;
            top:112px;
            width:554px;
            height:432px;
            overflow:hidden;
            border:none;
            color: rgb(255,255,102)
        }    
        </style>
    </head>
    <body>
        <div id="Navibild">
             <img src="24v5ms1.jpg" alt="" title="" border="0" height="702" width="850">
              <ul id="Tasten_links">
                  <li><a href="index.html">link1</a></li>
                  <li><a href="#nogo">link2</a></li>
                  <li><a href="#nogo">link3</a></li>
                  <li><a href="#nogo">link4</a></li>
              </ul> 
              <ul id="Tasten_rechts">
                  <li><a href="#nogo">link5</a></li>
                  <li><a href="#nogo">link6</a></li>
                  <li><a href="#nogo">link7</a></li>
                  <li><a href="#nogo">link8</a></li>
              </ul> 

         <div id="Bildschirm">
                  <video id="http://youtu.be/6bSPPRcpdlA" width="554" controls="controls" autobuffer="autobuffer">
                 <source src="film.webm" type="video/webm">
                 Zum Anzeigen des Videos bitte auf einen neueren Browser ausweichen.
                </video> 
       </div>   
    </div> 
    </body>
</html>

Für alle anderen Seiten immer den Inhalt innerhalb der <div id="Bildschirm"> austauschen. Auch dafür noch mal konkret:
HTML: 
<div id="Bildschirm">
                  Hier kommt der Inhalt rein welcher im Bildschirm angezeigt wird.
                  Bei Youtube/Videos also der Iframe.
</div>

Ich kann dir nur empfehlen dich mit der Materie, also HTML und CSS mal intensiver zu beschäftigen. Wir machen hier keine Seiten, wir geben Hilfestellung. Dazu bedarf es aber ein wenig Mitarbeit, denn sonst kann ich ja gleich die Seite fertigstellen und für mich selbst nutzen.
Ach nebenbei, was kostet bei dir eine Arbeitsstunde im Betrieb - siehste.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben