HTML resim ekleme kodu kullanımı örneği (HTML image adding code usage example)

HTML sayfada resim ekleme kodunu “img” elementini kullarak “src” attribute(özelliği) e ilgili resmin kaynağını göstererek kullanabilirsiniz.

<img src="image01.png">
<img src="../../includes/images/yazilimcitynetAvatar03.png">

Ayrıca “img” e aşağıdaki gibi özelliklerde atayabilirsiniz.

<img src="http://yazilimcity.net/wp-content/uploads/2014/02/yazilimcitynetAreaMap01.jpg" title="açıklama" width="400" height="150">

Ve “img” dışında “map” ve “area” elementleri ile de sayfanızda resim göstererek bu resmin istenilen kesimleri üzerinden başka sayfa, resim ve site yolları göstererek bunlara ulaşılmasını sağlayabilirsiniz.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
    <title>HTML resim ekleme kodu| HTML image adding code | yazilimcity.net</title>
    <meta charset="UTF-8">
</head>

<tbody>

<img src="http://yazilimcity.net/wp-content/uploads/2014/02/yazilimcitynetAreaMap01.jpg" usemap="#darkFotoMap" width="300" height="280">

<map name="darkFotoMap">
    <!--left space, top space, area from left, area of top-->
    <area shape="rect" coords="5,205,50,170" alt="home" title="home"
          href="http://yazilimcity.net/wp-content/uploads/2014/02/yazilimcitynetAreaMap01Home.jpg">
 
    <!--xaxis left space, xaxis top space, circle area-->
    <area shape="circle" coords="151, 75, 9" alt="moon" title="moon"
        href="http://yazilimcity.net/wp-content/uploads/2014/02/yazilimcitynetAreaMap01Moon.jpg">
 
    <!-- xaxis left space, xaxis top space, yaxis left space. yaxis top space, left point of merging, top point of merging -->
    <area shape="poly" coords="205,60,170,120,240,120" alt="triangle" title="triangle"
          href="http://yazilimcity.net/wp-content/uploads/2014/02/yazilimcitynetAreaMap01Triangle.jpg">
 
    <!--everywhere-->
    <area shape="default" alt="everywhere" title="everywhere"
        href="http://www.yazilimcity.net">
</map>

</tbody>

</html>



Share on Facebook0Tweet about this on TwitterShare on Google+0Share on StumbleUpon0Share on Reddit0

Leave a Reply


*