HTML - Bilder Links

Bildern helfen Ihnen ein wenig Leben und Farbe in einer Web-Seite zu bekommen. Das Umwandeln eines Bildes in ein Link ist jedoch nicht schwer. Sie müssen nur die Quelle des Bildes innerhalb des img Tags einfügen und dann in ein Link-Tag setzen. So einfach ist das.

html<a href="http://www.tutorialehtml.com/" title="This is an HTML liked image">
	<img alt="alternative text for the liked image" src="/assets_tutorials/img/image.jpg" width="120" height="75" />
</a>

Demo

In einigen Fällen fügen standardmäßig einige der Browser einen Rahmen zu dem Bild hinzu, das als Link verwendet wird, um es einfach von einem normalen Bild zu unterscheiden. Damit Sie wegen des Browsers keine Probleme mit verschiedenen Anzeigen haben, können wir den Rahmen auf einen definierten Wert setzen.

html<a href="http://www.tutorialehtml.com/" title="This is an HTML liked image">
	<img 	alt="alternative text for the liked image"
		src="/assets_tutorials/img/image.jpg"
		width="120"
		height="75"
		border="5"
		style="border:5px solid #337AB7" />
</a>

Demo

Die Grenze Attribut von <img> sind nicht in HTML5 unterstützt. Ich habe eine CSS-Regel, die Sie stattdessen verwenden können.

HTML - Thumbnails

Die Thumbnails sind Versionen in Miniatur (viel weniger kB) von einigen Bildern, die in Wirklichkeit größer und mit einer besseren Qualität sind. Um ein Thumbnail zu erstellen, speichern Sie das Bild in einer niedrigeren Qualität als das Original.Dann verknüpfen Sie dieses kleine Bild mit dem Originalbild hoher Qualität.

html<a href="/assets_tutorials/img/image.jpg" title="This is an HTML liked image">
	<img alt="alternative text for the liked image" src="/assets_tutorials/img/image.jpg" width="66" height="49" />
</a>

Demo