MyCity » Web dizajn / HTML » Kako da uradim ovaj slide show

Kako da uradim ovaj slide show

Napisano na dan: 13.11.2008

Kako da uradim ovaj slide show
Sledeća strana Pagination

Idi na vrh

Poslao: 13 Nov 2008 01:17
Idi na vrh
offline
  • Pridružio: 04 Nov 2008
  • Poruke: 7

Možda jeste trivijalno ali kako sve ovo da uklopim da bi ovaj fantastični slideshow proradio.
Kako nazvati ovaj dokument,da li treba folder za slike,makar mi smernice recite

The CSS:

<style type="text/css"> /*Credits: Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/ */ .gallerycontainer{ position: relative; /*Add a height attribute and set to largest image's height to prevent overlaying*/ } .thumbnail img{ border: 1px solid white; margin: 0 5px 5px 0; } .thumbnail:hover{ background-color: transparent; } .thumbnail:hover img{ border: 1px solid blue; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: lightyellow; padding: 5px; left: -1000px; border: 1px dashed gray; visibility: hidden; color: black; text-decoration: none; } .thumbnail span img{ /*CSS for enlarged image*/ border-width: 0; padding: 2px; } .thumbnail:hover span{ /*CSS for enlarged image*/ visibility: visible; top: 0; left: 230px; /*position where enlarged image should offset horizontally */ z-index: 50; } </style>

The HTML:

<div class="gallerycontainer"> <a class="thumbnail" href="#thumb"><img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/tree.jpg" /><br />Simply beautiful.</span></a> <a class="thumbnail" href="#thumb"><img src="media/ocean_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/ocean.jpg" /><br />So real, it's unreal. Or is it?</span></a> <br /> <a class="thumbnail" href="#thumb"><img src="media/sushi2_thumb.jpg" width="100px" height="75px" border="0" /><span><img src="media/sushi2.jpg" /><br />Sushi for dinner anyone?</span></a> <a class="thumbnail" href="#thumb"><img src="media/horses_thumb.jpg" width="100px" height="70px" border="0" /><span><img src="media/horses.jpg" /><br />Run wild with horses.</span></a> <br /> <a class="thumbnail" href="#thumb">Dynamic Drive<span><img src="media/dynamicdrive.gif" /><br />Dynamic Drive</span></a> <br /> <a class="thumbnail" href="#thumb">Zoka Coffee<span><img src="media/zoka.gif" /><br />Zoka Coffee</span></a> </div>



Registruj se da bi učestvovao u diskusiji. Registrovanim korisnicima se NE prikazuju reklame unutar poruka.
Poslao: 13 Nov 2008 02:01
Idi na vrh
offline
  • diarno  Male
  • Anti Malware Fighter
    Rank 2
  • Pridružio: 15 Jun 2007
  • Poruke: 5572

Daj mi direktan link do tog slideshow-a.



Poslao: 13 Nov 2008 02:03
Idi na vrh
offline
  • Pridružio: 04 Nov 2008
  • Poruke: 7

evo linka

dynamicdrive.com/style/csslibrary/item/css-image-gallery/

Poslao: 13 Nov 2008 02:11
Idi na vrh
offline
  • diarno  Male
  • Anti Malware Fighter
    Rank 2
  • Pridružio: 15 Jun 2007
  • Poruke: 5572

Evo ti kod :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> /*Credits: Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/ */ .gallerycontainer{ position: relative; /*Add a height attribute and set to largest image's height to prevent overlaying*/ } .thumbnail img{ border: 1px solid white; margin: 0 5px 5px 0; } .thumbnail:hover{ background-color: transparent; } .thumbnail:hover img{ border: 1px solid blue; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: lightyellow; padding: 5px; left: -1000px; border: 1px dashed gray; visibility: hidden; color: black; text-decoration: none; } .thumbnail span img{ /*CSS for enlarged image*/ border-width: 0; padding: 2px; } .thumbnail:hover span{ /*CSS for enlarged image*/ visibility: visible; top: 0; left: 230px; /*position where enlarged image should offset horizontally */ z-index: 50; } </style> </head> <body> <div class="gallerycontainer"> <a class="thumbnail" href="#thumb"><img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/tree.jpg" /><br />Simply beautiful.</span></a> <a class="thumbnail" href="#thumb"><img src="media/ocean_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/ocean.jpg" /><br />So real, it's unreal. Or is it?</span></a> <br /> <a class="thumbnail" href="#thumb"><img src="media/sushi2_thumb.jpg" width="100px" height="75px" border="0" /><span><img src="media/sushi2.jpg" /><br />Sushi for dinner anyone?</span></a> <a class="thumbnail" href="#thumb"><img src="media/horses_thumb.jpg" width="100px" height="70px" border="0" /><span><img src="media/horses.jpg" /><br />Run wild with horses.</span></a> <br /> <a class="thumbnail" href="#thumb">Dynamic Drive<span><img src="media/dynamicdrive.gif" /><br />Dynamic Drive</span></a> <br /> <a class="thumbnail" href="#thumb">Zoka Coffee<span><img src="media/zoka.gif" /><br />Zoka Coffee</span></a> </div> </body> </html>

I sta je bio problem?

Koji program koristis? DW ili nesto drugo?

Poslao: 13 Nov 2008 02:23
Idi na vrh
offline
  • Pridružio: 04 Nov 2008
  • Poruke: 7

Dw
...uh teško sa vama developer-ma.
Šalim se naravno,pa problem je kako onaj scc da uklopim u html eto to mi je neznanje

Poslao: 13 Nov 2008 02:50
Idi na vrh
offline
  • diarno  Male
  • Anti Malware Fighter
    Rank 2
  • Pridružio: 15 Jun 2007
  • Poruke: 5572

Ovako, CSS može biti deo HTML dokumenta (internal CSS), i tada se ubacuje u <head> deo stranice(znaci izmedju<head> i </head>). Može biti "external" i tada se poziva preko URL-a .. Link za externi css se takodje dodaje(ako koristis DW on ce ga automatski smestiti gde mu je mesto) u head deo;

Znaci internal :

<style type="text/css"> /* ----- ovde idu elementi i sve sto je vezano za stilove ----- */ </style>

i external :

<link href="blabla.css" rel="stylesheet" type="text/css"/>

Postoji i inline al necemo o tome Mr. Green

Jel sad jasnije?

Napravi folder i u njemu napravi folder gde ces drzati slike ;
U taj glavni folder sacuvaj htm i css(ako je external)....iiiiii... mozemo ovako do sutra... a ti lepo prelistaj top teme, uclani se na www.tutoriali.org i skini tutorijale koji se nalaze u sekciji HTML i CSS; Wink

Poslao: 13 Nov 2008 13:25
Idi na vrh
offline
  • Pridružio: 04 Nov 2008
  • Poruke: 7

Ok diarno,jasnije je mi
Hvala

MyCity » Web dizajn / HTML » Kako da uradim ovaj slide show

Ko je trenutno na forumu
 

Ukupno su 1122 korisnika na forumu :: 39 registrovanih, 4 sakrivenih i 1079 gosta   ::   [ Administrator ] [ Supermoderator ] [ Moderator ] :: Detaljnije

Najviše korisnika na forumu ikad bilo je 3466 - dana 01 Jun 2021 17:07

Korisnici koji su trenutno na forumu:
Korisnici trenutno na forumu: A.R.Chafee.Jr., antonije64, Areal84, babaroga, Bobrock1, bokisha253, bozo13, delrey, dushan, flash12, Georgius, Griffon vulture, hooraay, Karla, Kriglord, krkalon, Krvava Devetka, kybonacci, Leonov, Lieutenant, Lošmi, mercedesamg, milutin134, nebkv, Oscar, pein, procesor, raptorsi, ruger357, Srky Boy, Srle993, stalja, stegonosa, Trpe Grozni, Vladko, VP6919, Webb, wolf431, yrraf