Image Replacement mit CSS-Stilen ...

Ein Artikel ... Manu 4 Kommentare

Im obigen Beispiel haben wir gesehen, wie ein Bild mit Dreamweaver-Tool zu ersetzen ", Rollover-Bild".
Jetzt versuchen zu erklären, wie man etwas Ähnliches mit CSS zu tun, ich denke, es ist gut, die einfachen Schritte kennen, aber wie ich schon geschrieben habe, wenn es einige Einschränkungen, die benötigt wird, um sie zu korrigieren, um einige Änderungen an Dokumenten zu machen, und gemeinsam nutzen HTML sind, und CSS.Siempre und wenn wir um ein Bild zu verändern, mit einem Link zu einer Website, oder intern Platz zu gehen.
Wir sehen ...

- Beispiele für den Ersatz eines Bildes mit CSS-Stilen ...

Um dieses einfache Beispiel zu machen, glaube nicht, dass wir viele Dinge fehlen, aber ich rate Ihnen, wählen Sie zwei Bilder die gleiche Größe haben, um sie gelegt unserem Beispiel, dann können Sie Ihre eigenen Kontrollen mit Bildern von verschiedenen Größen und Maßnahmen treffen, einschließlich üben, um zwei Bilder in Urls ganz andere Sachen zu platzieren, als Ich mag, erstellen, löschen, platzieren und starten ...

Wir werden eine Schicht </ div> für diesen Test mit wechselnden Bildern zu erstellen, und veröffentlichen auch die Bilder zwischen <table> <td> </ td> </ tr> </ table> so können wir den Unterschied sehen zwischen jedem Etikett. Für beide ejmplos haben die gleichen Stile.

Denken Sie daran, einen Überschlag Sie sie auf verschiedene Weise tun konnte, zu platzieren, dieses Beispiel Sie glauben, in einer Schicht <div> als Kommentar und als Kuriosum, das perfekt funktioniert das div: hover, um alles was wir brauchen, um einen kleinen Trick beschäftigen Positionieren Sie das Bild Wir werden als Link zu verwenden (Anker -> <a href=""> </ a>), wo wir es platzieren wollen.

Hinweis; Dieses Beispiel kann nicht gut im IE6, beispielsweise aufgrund von Inkompatibilität ...

- Starten Sie ...
Erstellen Sie eine neue HTML-Datei im Editor sind Sie, oder Sie können schreiben oder kopieren Sie den Code, den wir für dieses Beispiel schaffen wird.
Denken Sie daran, dies ist nur ein Beispiel dafür, Div Schichten, um zu sehen, was passiert und lernen neue Dinge passiert.

Ich für mein Beispiel wählte ich diese Bilder, die alle drei ...
Das Bild der Text ist viel schwerer als die beiden anderen geändert werden soll, wiegt rund 60 KB, und die Boxen sind größer, aber nicht für Gewicht nicht größer als 10KB, aber zum Beispiel hatten wir besser, aber wenn quisieseis ein Navigationsmenü machen zum Beispiel mit dieser Art von Bild mit Schatten, verzögern Teil der Last des Menüs, würde fast seguro.No ratsam sein.
Auch, anstatt das Bild, das Sie geschriebenen Text verwenden können, weil es meine Absicht ist, um das Bild zu <a Link gesetzt href=""> </ a>, um es mit meiner Web zB zu verknüpfen.

Ich kommentierte, bevor an diesem CSS ist ein bisschen mehr begrenzte Die Frage der Ersetzung des Bildes mit Link <a href="">, also müssen wir auf HTML verlassen, denn CSS innerhalb der <a href = ""> nicht funktioniert, im Gegensatz zu den Ersatz-Skript und ich denke, Dreamweaver Link zusammen in dem obigen Beispiel, können wir nur in CSS Bilder cambiantes.Explico wie zu tun setzen ...

Nun habe ich die Schicht und die Tabelle, stellen Sie die beiden Beispiele mit den gleichen Stile und sehen, was wir für uns tun kann ist in der Mitte Link zu dem Bild.
Ich habe es, wie es um den Code zu schreiben, ist ...

- Die Stile, die ich für die beiden Beispiele verwendet ...

"> <style type=" text/css ">
. Box {
#FFC url(http://www.internavegacion.com/imagenes-blog/lleno.png) no-repeat ; background: # ffc url (http://www.internavegacion.com/imagenes-blog/lleno.png) no-repeat;
#CCC dotted 1px ; border: 1px dotted # CCC;
130px ; height: 130px;
130px ; width: 130px;
}
. Box: hover {
#E8F4C1 url(http://www.internavegacion.com/imagenes-blog/vacio.png) no-repeat ; background: # E8F4C1 url (http://www.internavegacion.com/imagenes-blog/vacio.png) no-repeat;
}
img {
none ; border: none;
}
</ Style>

Wir sehen in den Bildern unten, wie wir innerhalb der Schicht und haben <table> <div>, die einen Unterschied zwischen ihnen auf dem Bild "Box" gibt, haben sie beide den gleichen Stile CSS, aber der Div Layer versetzt uns das Bild oben links, und wir <td> Tisch legt das Bild in der Mitte des hohen (Höhe), nicht die Breite (wldth).
Diese Beobachtungen nichts weiter als bis in Betracht gezogen werden, sind interessant, weil wir <td> standardmäßig zentriert das Bild von oben, und die Schicht normale Funktion <div> vor Inbetriebnahme und nach links ..

Dies ist ein Beispiel dafür, wie die Schicht <div> ...
Das Bild ist klar ... und stellte den Text und Code, ist mein Geschäft ...

Der Code, den ich in HTML für diese Schicht <div> geschrieben habe ...

<div class="caja"> <a href="http://www.internavegacion.com/"> <img src = "http://www.internavegacion.com/imagenes-blog/caja.png" width = "50" height = "35" title = "Rollover-Test" alt = "Rollover-Test" /> </ a> </ div> </ p>

Aus diesem Tisch ... <table> <td> </ td> </ tr> </ table>

<table class="caja"> <td> <a href="http://www.internavegacion.com/"> <img src = "http://www.internavegacion.com/imagenes-blog/ caja.png "width =" 50 "height =" 35 "title =" Rollover-Test "alt =" Rollover-Test "/> </ a> </ td> </ tr> </ table>

Nun wie wir gesehen haben, wird die Tabelle die Bildmitte des Textes, sondern Blätter auf der linken Seite, (links) und Schicht (div), setzen wir das Bild nach oben und links ... die normal sind für diese Art HTML-Tags.

Denn im Fall des Tisches, konzentrierten wir uns Bild <td> Datentabelle, die standardmäßig das wird am Anfang zur Folge haben, konzentrieren alles, was in ist, wenn nicht anders erwähnt Verwendung von Eigenschaften und CSS-Werte.

Wie ich schon schrieb, indem die Bilder in diesem begrenzten Weise einige Gesamtumschlag für Bilder innerhalb der Schicht und dem Tisch, denn sicherlich sollten wir CSS-Stilen zentrieren sie útilzar.

Bild innerhalb des DIV ...
Wir müssen bedenken, dass wir mit drei Bildern, eine in der Klasse Box {}, eine in der Klasse Box:.. Hover {} für einen Wechsel, wenn die Maus, und das Bild últino Link Anker <a href = ""> wird es sein, uns zu anderen Seiten oder anderen Websites übernehmen.

Bild in Tabelle ...
Nun wissen wir, dass Bilder können leere Elemente geworden, viele Eigenschaften und Werte nicht beeinträchtigt wird, behandeln wir es als was es ist, ein leeres Element ...
Ich denke, keine schlechte Idee, Fotos zu machen manchmal die Tabellen, die oft Probleme lösen teodiosos unscharfe Bilder, aber das ist ein Thema, dass wir, wie wir, und wir werden bekommen, natürlich haben zu konzentrieren ...

- Lassen Sie uns ...

- Wir begannen, um das Bild auf den Tisch zu konzentrieren ...

Beginnen Sie mit der Lösung der Tabellen, so dass ich es einfacher finden, um das Bild, bastandome für sie, legte ein <td> align: center, oder in;

Html - >> <td align="center"> </ td>
Html - >> <td style="text-align:center"> mediente Stile ...

Html - >> <table style="text-align:center"> </ table> Das ist auch wahr, aber ist mir egal, weil alles, was sie zu konzentrieren ist in der Tabelle, und was ich will, ist spezifische, genau das, was enthält das Bild Link, oder was immer es ist in <td> </ td>

Ich hoffe, ich verstehe diesen Teil können Sie auch auf die CSS-Blatt zu schreiben, mit Klassen, mit Kennungen, aber es ist leichter, meine Gedanken, wie ich oben zu tun, aber wenn mehrere oder viele Bilder, die auf diese Weise behandelt , dann organisieren, und erstellen Sie Klassen oder Eigenschaften für dieses Ereignis.

Css - >> td {text-align: center;} Dieses Bild Fokus oder den Inhalt der Datentabelle.
Css - >> Tabelle {text-align: center;} Dieses Bild Fokus und der Inhalt der Tabelle, die nicht interessieren können Sie, aber es ist das Beispiel ...

- Wir werden weiterhin das Bild auf der Schicht Div konzentrieren ...

Um die Bildmitte auf dem Deckel Div, beschloss ich, ohne Ränder zu tun.
Zum Beispiel gelang es mir um das Bild zu erzählen haben Sie einen Zeilenumbruch, und ich habe ein gutes Ergebnis.

Dann habe ich eine Füllung (padding), der das Bild umgibt innerhalb <td> </ td> in einem Maße entspricht Aufteilung der Schicht in drei mehr oder weniger zugewiesen, und ich habe das Ergebnis der Abbildung oben, wo es heißt "Image in der Div layer", und wir können das Bild unten zu sehen, wie sieht mehr oder weniger zentriert.

Der Teil, der in der Mitte angezeigt wird, ist das Bild von der Link-Text wie ich schon schrieb. Wenn man sich die Füllung aussehen wird, um das Bild mit den Prozentwerten angegeben, dass die <td> Datentabelle mit CSS-Stile innerhalb des Tags <td> und HTML-Dokument erstellt.

Hier sehen Sie unterhalb der propieddes und Werte, die ich zu <td> zugewiesen, Füllen High-und Low von 32%, und einer Füllung aus links - rechts 32%, die ich den Text siuia Bild von dem Link, wie oben gezeigt.

Die Eigenschaften und Werte, die ich verwendet; <img style="padding:32%;display:block;" />

Wir konnten zu den Bildrändern zugewiesen haben, in eine solche <td> align: center, und das Bild <img src="" /> ein margin-top: 32% zum Beispiel, aber ich habe auch sonst verwendet unterschiedliche gültig. Das display: block nicht richtig über diese Strecke Pixel seitwärts, die es aus meiner Sicht besser macht.

Also Leute, ich hoffe, es diente einige diesen Posten, wenn Sie etwas klarer einige Punkte zu diesem Thema, desto besser gemacht haben kann ...
Wenn ich mit etwas beschäftigt bin, und Sie sehen teodioso, denken Sie daran, in den Supermarkt gehen, um Essen kaufen gehen kann, mit dem Auto, LKW, Fahrrad oder zu Fuß, entscheiden Sie ...

Ich rate Ihnen, mit den Bildern zu üben, werden Sie Dinge, die Sie lenken die Aufmerksamkeit, die Praxis mit den Werten und CSS-Eigenschaften bemerken, die dann berücksichtigt einige Punkte, in der Lage, unterschiedliche Formen und Methoden der coocar ein Bild, das sehen tatsächlich kann auch auf andere Weise vorgenommen werden, aber nicht viele ... wenn überhaupt existieren.