Εσωτερικά πλαίσια στις εικόνες - Inner borders to images

English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

  • Σύνδεση στον Blogger
  • Σχεδίαση / Επεξεργασία HTML
  • Βρείτε την ετικέτα </head>
  • Επικολλήστε πριν από αυτήν τον παρακάτω κώδικα:

<style type='text/css'>

#inner-borders a img, #inner-borders a { border: none; overflow: hidden; float: left; }
#inner-borders a:hover { border: 3px solid #
ff0000; }
#inner-borders a:hover img { margin: -3px; }

</style>
  • Μπορείτε να αλλάξετε το χρώμα του πλαισίου στο κίτρινο φόντο του κώδικα.
  • Αποθηκεύστε το πρότυπό σας.
  • Για να χρησιμοποιήσετε αυτό το Trick χρησιμοποιήστε τον παρακάτω κώδικα:

<div id="inner-borders">

<a href="
#"><img src="http://1.bp.blogspot.com/_4HKUHirY_2U/SxIRWePfVYI/AAAAAAAAAZ8/MSmCLCmWA8k/slideshow+1+small.jpg" alt="#" /></a>

<a href="
#"><img src="http://1.bp.blogspot.com/_4HKUHirY_2U/SxIRhli6o6I/AAAAAAAAAaM/fmkIOf7MPtE/slideshow+2+small.jpg" alt="#" /></a>

<a href="
#"><img src="http://3.bp.blogspot.com/_4HKUHirY_2U/SxIRonaYyII/AAAAAAAAAac/ls3j_gSduPk/slideshow+3+small.jpg" alt="#" /></a>

</div>
  • Βάλτε στο κίτρινο φόντο τα link των δικών σας εικόνων στο συγκεκριμένο μέγεθος και στη θέση της δίεσης το URL που θα οδηγεί η εικόνα μόλις κάνουμε κλικ πάνω της.




    0 σχόλια:

    Post a Comment

     
    back to top