Eingefügtes Bild bearbeiten

html.de-Forum HTML, XHTML & CSS
1

Hi,

wie kann ich einem eingefügten Bild einen Rahmen geben und wie ich es anklickbar machen, sprich wenn ich mit der Maus drauf klicke es größer wird?

Bisheriger Code:

<div><img id="ZimmerBild1" src="Bilder/Zimmer1.jpg"></div>
<div><img id="ZimmerBild2" src="Bilder/Zimmer2.jpg"></div>
#ZimmerBild1{
    height: 200px;
    width: 500px;
    margin-left: 590px;
    margin-top: -125px;
    border-color: black;
    border-style: groove;
    border: 3px;
}

Das wäre mein Ansatz für den Rahmen, wie ich das Bild anklickbar mach kann, hab ich 0 Ahnung.

Kann/muss ich hier bei den eingefügte Bildern eine „id“ verwenden oder wäre eine „class“ angebrachter?

Verstehe immer noch nicht, wann ich was verwenden muss…

2

[ol]
[li] http://www.cssplay.co.uk/menu/gallery_click.html [/li][li] http://www.cssplay.co.uk/menu/cssplay-clickbox.html [/li][li] http://www.cssplay.co.uk/menu/playbox.html [/li][li] http://www.cssplay.co.uk/menu/oneBox.html [/li][li] http://www.cssplay.co.uk/menu/html5-oneBox.html [/li][li]…[/li][/ol]

Ohne den übrigen HTML-/CSS-Code der Seite mit den detailierten Auswirkungen zu kennen, kann hier grundsätzlich auf beides gänzlich verzichtet werden.

[code=html]

[/code] [code=css]div img { height: 200px; width: 500px; margin-left: 590px; margin-top: -125px; border-color: black; border-style: groove; border-width: 3px }[/code]

Es ist nicht die Aufgabe eines Forums Grundlagenwissen zu vermitteln, das zudem ganz leicht gegoogelt werden kann.

http://lmgtfy.com/?q=id+class+difference

3

Hier einmal der ganze Code:


<html>
    <head>
        <title>Mein Hotel</title>
        <link rel ="stylesheet" type="text/css" href="Css/Style-Homepage.css"/>
       
        <!-- Start WOWSlider.com HEAD section -->
        <link rel="stylesheet" type="text/css" href="engine1/style.css" />
        <script type="text/javascript" src="engine1/jquery.js"></script>
        <!-- End WOWSlider.com HEAD section -->
       
    </head>
   
    <body>
        <link href='https://fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet' type='text/css'>
        <div id="links"><img src="Bilder/Hotel_Logo.png"></div>
        <div id="rechts"><img src="Bilder/Hotel_Logo.png"></div>
       
       
        <div id="menue">
        <table id="Kopfzeile">
        <tr>
            <td><a id="Feld1" href="Startseite.html">Startseite</a></td>
            <td><a href="Kontakt.html">Kontakt</a></td>
            <td><a href="Preise.html">Preise</a></td>
            <td><a href="Bilder.html">Bilder</a></td>
            <td><a href="Zimmer.html">Zimmer</a></td>
            <td><a href="Impressum.html">Impressum</a></td>
        </tr></table>
        </div>
        <h1 id="Hauptseite_h1">Herzlich Willkommen im Grand Hotel</h1>
       
       
   
   
    <!-- Start WOWSlider.com BODY section -->
   
    <div id="wowslider-container1">
    <div class="ws_images"><ul>
        <li><img src="data1/images/hotelbild1.jpg" alt="" title="" id="wows1_0"/></li>
        <li><img src="data1/images/hotelbild3.jpg" alt="" title="" id="wows1_1"/></li>
        <li><img src="data1/images/hotelbild4.jpg" alt="" title="" id="wows1_2"/></li>
        <li><a href="http://wowslider.com/vi"><img src="data1/images/hotelbild5.jpg" alt="bootstrap slider" title="" id="wows1_3"/></a></li>
        <li><img src="data1/images/hotelbild2.png" alt="" title="" id="wows1_4"/></li>
    </ul></div>
    <div class="ws_bullets"><div>
        <a href="#" title=""><span><img src="data1/tooltips/hotelbild1.jpg" alt=""/>1</span></a>
        <a href="#" title=""><span><img src="data1/tooltips/hotelbild3.jpg" alt=""/>2</span></a>
        <a href="#" title=""><span><img src="data1/tooltips/hotelbild4.jpg" alt=""/>3</span></a>
        <a href="#" title=""><span><img src="data1/tooltips/hotelbild5.jpg" alt=""/>4</span></a>
        <a href="#" title=""><span><img src="data1/tooltips/hotelbild2.png" alt=""/>5</span></a>
    </div></div><div class="ws_script" style="position:absolute;left:-99%"><a href="http://wowslider.com">wowslider.com</a> by WOWSlider.com v8.7</div>
    <div class="ws_shadow"></div>
    </div>   
    <script type="text/javascript" src="engine1/wowslider.js"></script>
    <script type="text/javascript" src="engine1/script.js"></script>
   
    <!-- End WOWSlider.com BODY section -->
    </body>
</html>


#navigation li a: hover {
    border: 1px solid #000000;
    padding: 2px 5px 2px 5px;

}
   
#links {
    height: 100%;
    background-color: #848484;
    width: 220px;
    float: left;
}
   
#rechts {
    height: 100%;
    background-color: #848484;
    width: 220px;
    float: right;
}
   
#inhalt {height: 100%;
    background-color: #F8E0E0;
}

   

   
       
#Kopfzeile{
position: fixed;
margin-left: 221px;
width: 71.4%;
background-color: black;
border: 2px ;
}

#Kopfzeile td{
width: 15%;
padding: 15px;
height: 15px;
background-color: #FF8000;
text-align: center;
}

#Kopfzeile a:link, #Kopfzeile a:visited {
color: white;
font-style: Arial;

}

#Kopfzeile a:hover {
color: white;
font-weight: bold;
font-style: Arial;
}

#Feld1{
    font-size: 20px;
   
   
}

#wowslider-container1{
    padding-top: 50px;
}

#menue{
    height: 10%;
    width: 200px;
}

#Hauptseite_h1{
text-align: center;
font-size: 50px;
font-family: 'Montserrat', sans-serif;
}

#Zimmer{
    margin-top: 80px;
    margin-left: 300px;
    text-decoration: underline;
    color: #FF8000;
    font-size: 15px;
}

#Zimmer_Text {
    margin-left: 300px;
    font-style: Arial;
    font-size: 17px;
    margin-right: 800px;
    text-align: justify;
}
#ZimmerBild1{
    height: 200px;
    width: 500px;
    margin-left: 590px;
    margin-top: -125px;
    border-color: black;
    border-style: groove;
    border: 3px;
}

#ZimmerBild2{
    height: 200px;
    width: 500px;
    margin-left: 590px;
    margin-top: 80px;
}

id’s können ja auf einer Seite nur einmal verwendet werden und sind für einzelne Elemente zuständig. Aber ich hab ja auf meiner Seite auch mehrere id’s und es funktioniert. Oder ist da gemeint, nur einmal der selbe id-Name? Ich blick da nicht durch…

4

Mehrere Elemente mit derselben ID?

Das funktioniert nur solange, wie diese Elemente bzw. deren ID-Bezeichner nicht mit JavaScript in Berührung kommen. Denn genau hier versagt dann die Funktionalität des Scripts.

Wenn Du solch eine Seite vom Validator https://validator.w3.org/ prüfen lässt, werden alle mehrfach vorhandenen ID’s als Fehler gemeldet - unabhängig davon, ob da nun JavaScript im Spiel ist, oder nicht.

5

Hallo

Aber ich hab ja auf meiner Seite auch mehrere id’s und es funktioniert.

Die Browser sind darauf ausgelegt auch fehlerhaften HTML-/CSS-Quellcode wenn irgend möglich noch sinnvoll anzuzeigen. Einerseits ist das für Anfänger hilfreich, andererseits erkennen sie so ihre Fehler nicht.

Bei HTML/CSS ist zwar festgelegt, wie die Browser korrekten Quellcode anzeigen sollen. Bei fehlerhaften Quellcode ist das natürlich nicht möglich und jeder Browser muss sein eigenes Süppchen kochen. Die Probleme werden deshalb häufig erst sichtbar wenn die Seite in unterschiedlichen Browsern und unterschiedlichen Fenstergrößen betrachtet wird. Also Firefox,Chrome, IE, Opera, Safari. Zudem auf Smartphones, Tablets und Desktops in Quer- und Hochformat.

In einem anderen Thema wurdest du bereits auf dein fehlendes Grundlagenwissen aufmerksam gemacht. Dadurch fällt es schwer dir zu helfen.

id sind nicht besser als class, wie Anfänger wohl häufig vermuten. id und class haben unterschiedliche Aufgaben. id sollen ausschließlich verwendet werden, wenn sie aus technischen Gründen nur einmal auf einer Webseite auftauchen dürfen. Und nicht, wenn der Webseitenersteller sie nur einmal verwenden will. In 99,9% aller Fälle ist deshalb die Verwendung von class sinnvoll.

Gruss

MrMurphy