Tolong pilih kategori sesuai, jenis posting (diskusi atau bukan) dan sertakan tag/topik yang sesuai seperti komputer, java, php, mysql, dll. Promosi atau posting tidak pada tempatnya akan kami hapus!
- Bagi Anda yang ingin mendaftar, baca link berikut:
http://diskusiweb.com/discussion/50491/how-to-registrasi-diskusiweb-com-baca-ini-terlebih-dahulu
- Cara menyisipkan kode program supaya tampil rapi dan terformat dengan baik di diskusiweb.com: http://www.diskusiweb.com/discussion/50415/cara-menyisipkan-kode-program-di-diskusiweb-com
- Cara posting gambar/image di post Anda: http://www.diskusiweb.com/discussion/47345/cara-menyisipkan-menyertakan-image-pada-posting/p1

Buat Tampilan Gambar kaya Pencarian Google image,

kaka kaka ini si awam mau tanya..   mohon dibanntu ya..

kalo kita search image di google kan muncul tuh thumbsnail banyak..
kalo mouse over kan ukuran jadi besar tuh..
tapi image lain ga ngeser.... fix.

saya buat pake CSS.. image mebesar tapi jadi image lain nggeser...
tapi kalo google kan ngga.. jadi image yg membesar menutupi image lain..

mohon pencerahan.. penasaran nih... 
:-/

Comments

  • Pernah denger jQuery?
  • Pernah Mas, cuma kan banyak tuh gunanya.. yg mana ya.. ada artikelnya / atu sumber ga mas... ?
  • edited March 2012
    ndak perlu jquery,
    jangan masalah selalu dihantam dgn solusi framework

    cuma mainan html + css + js

    ketahui dasarnya, supaya tau framework itu buat apaan ... dan gak selalu framework jadi solusi
  • edited March 2012
    belajar dari sini : http://w3schools.com/

    ini gw kasih contoh, tapi -like always- ,
    kalo gw kasih kode mentah = tidak ada penjelasan ...
    pelajari sendiri

    <script>
      function show(id) {
        document.getElementById(id+"_").style.display="";
      }
      function hide(id) {
        document.getElementById(id).style.display="none";
      }
    </script>
    <div style="margin:100px;">
      <div style="clear:both;height:100px;">
        <div style="float:left;width:100px;">
          <img src="images1.jpeg" id="images1" width="100px" border=0 onmouseover="show(this.id);">
          <img src="images1.jpeg" id="images1_" width="200px" border=0 onmouseout="hide(this.id);" style="position:absolute;z-index:1;margin:-50px 0 0 -150px;display:none;">
        </div>
        <div style="float:left;width:100px;">
          <img src="images2.jpeg" id="images2" width="100px" border=0 onmouseover="show(this.id);">
          <img src="images2.jpeg" id="images2_" width="200px" border=0 onmouseout="hide(this.id);" style="position:absolute;z-index:1;margin:-50px 0 0 -150px;display:none;">
        </div>
      </div>
      <div style="clear:both;">
        <div style="float:left;width:100px;">
          <img src="images3.jpeg" id="images3" width="100px" border=0 onmouseover="show(this.id);">
          <img src="images3.jpeg" id="images3_" width="200px" border=0 onmouseout="hide(this.id);" style="position:absolute;z-index:1;margin:-50px 0 0 -150px;display:none;">
        </div>
        <div style="float:left;width:100px;">
          <img src="images4.jpeg" id="images4" width="100px" border=0 onmouseover="show(this.id);">
          <img src="images4.jpeg" id="images4_" width="200px" border=0 onmouseout="hide(this.id);" style="position:absolute;z-index:1;margin:-50px 0 0 -150px;display:none;">
        </div>
      </div>
    </div>

    penerapan kagak se-simple itu
  • wah @monyet...  terima kasih mas... begu2.. seperti itu... aku paham.. cuma ko ada yg aneh dg hasilnya..

    berarti disitu mainnya buat image 2 bukan memperbesar image ya mas.. ?
    setau aku ngzooom.. +.

    soale yg asli(gambar yg kecil) tetep ada jadi aneh.. but Thank's.. 
    :)
  • ndak perlu jquery,
    jangan masalah selalu dihantam dgn solusi framework

    cuma mainan html + css + js

    ketahui dasarnya, supaya tau framework itu buat apaan ... dan gak selalu framework jadi solusi
    kquery juga boleh berarti dong
    lquery?
    mquery?
    nquery?
    oquery?
  • aneh dari mana?

    itu per image cuma pake 1 image
    kalo image nya ada, gambar yg kecil pasti ngumpet dibelakang, z-index nya aja beda ...
  • edited March 2012
    @monyet aka @ikanPaus haha kirain dia mau pakein animasi buat zoomingnya macam Google :p

    @saefulloh nih kalo ga pake animasi, pake ini aja... Cuma HTML sama CSS doang plus-plus :p
    Scriptnya nyolong dari si @monyet ;aka @ikanPaus ;yang diatas

    <style>
    img#monyet2:hover, img#monyet3:hover{
    -moz-transform: scale(1.5) rotate(5deg) translate(0px, 0px) skew(0deg, 0deg);
    -webkit-transform: scale(1.5) rotate(5deg) translate(0px, 0px) skew(0deg, 0deg);
    -o-transform: scale(1.5) rotate(5deg) translate(0px, 0px) skew(0deg, 0deg);
    -ms-transform: scale(1.5) rotate(5deg) translate(0px, 0px) skew(0deg, 0deg);
    transform: scale(1.5) rotate(5deg) translate(0px, 0px) skew(0deg, 0deg);
    }
    img#monyet1:hover, img#monyet4:hover{
    -moz-transform: scale(1.5) rotate(-5deg) translate(0px, 0px) skew(0deg, 0deg);
    -webkit-transform: scale(1.5) rotate(-5deg) translate(0px, 0px) skew(0deg, 0deg);
    -o-transform: scale(1.5) rotate(-5deg) translate(0px, 0px) skew(0deg, 0deg);
    -ms-transform: scale(1.5) rotate(-5deg) translate(0px, 0px) skew(0deg, 0deg);
    transform: scale(1.5) rotate(-5deg) translate(0px, 0px) skew(0deg, 0deg);
    }
    </style>

    <div style="margin:100px;">
        <div style="clear:both;height:100px;">
            <div style="float:left;width:100px;">
            </div>
            <div style="float:left;width:100px;">
            </div>
      </div>
    <div style="clear:both;">
            <div style="float:left;width:100px;">
            </div>
            <div style="float:left;width:100px;">
            </div>
        </div>
    </div
  • @krist : makasih mas.. ok ok.. hehe... like dah..  =D>
Sign In or Register to comment.