Move mouse over image!

Discussion in 'PHP' started by Alice24, Oct 16, 2011.

0
  1. #1
    Hello again. I have a q. anyone have an idee how can i make an effect in php when i move a mouse over an image to appear bigger ?
    i have an example here http://www.nights.ro/party/ mouve your mouse over imgs posters. :)
     
    Alice24, Oct 16, 2011 IP
  2. sachin410

    sachin410 Illustrious Member

    Messages:
    6,422
    Likes Received:
    573
    Best Answers:
    0
    Trophy Points:
    410
    #2
    sachin410, Oct 16, 2011 IP
  3. Alice24

    Alice24 Greenhorn

    Messages:
    59
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #3
    Alice24, Oct 16, 2011 IP
  4. MyVodaFone

    MyVodaFone Well-Known Member

    Messages:
    1,048
    Likes Received:
    42
    Best Answers:
    10
    Trophy Points:
    195
    #4 
    
<img src="http://forums.digitalpoint.com/image.php?u=368480&dateline=1318497010" width="80" height="80" name="image_name"
onmouseover="image_name.width='100';image_name.height='100';"
onmouseout="image_name.width='80';image_name.height='80';" />
    HTML:
    Actally forget that, I just looked at your sample url...
     
    Last edited: Oct 16, 2011
    MyVodaFone, Oct 16, 2011 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #5
    This is NOT a question about PHP, nor should it be something you should be wasting javascript on... much less 1998 style scripting like what myVodaFone suggests.

    I'm assuming the reason the image has a hover effect is it's inside an achor?

    <a href="#"><img src="images/dummy.jpg" width="80" height="80" alt="dummy" /></a>

    
a:active img,
a:focus img,
a:hover img { // all three states so keyboard users aren't left out in the cold
  width:100px;
  height:100px;
}
    Code (markup):
    Though I suspect that is NOT what you are asking about given your demo link -- are you asking about having the full size appear at the cursor when you mouse-over the thumb? If so that's a whole different ballgame (that I'd do with a sandbag span and background-image).
     
    deathshadow, Oct 17, 2011 IP
  6. Alice24

    Alice24 Greenhorn

    Messages:
    59
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #6
    Thank you MyVodaFone Is exactly what i need.
    @deathshadow i know whis could be done with java or jquery or flash or what ever... but i need the simplest way. :p
     
    Alice24, Oct 17, 2011 IP
  7. JohnnySchultz

    JohnnySchultz Peon

    Messages:
    277
    Likes Received:
    4
    Best Answers:
    7
    Trophy Points:
    0
    #7
    you can try this..
    
<html>
  <head>
     <style type="text/css">
       a.zoom img { border:none; width:80px; height:80px; }
       a.zoom:hover img { border:none; width:100px; height:100px; }
     </style>
  </head>
  <body>
    // put your image inside an anchor tag
    <a href="#" class="zoom"><img src="/images/image.jpg" /></a>
  </body>
</html>
    HTML:
    you can adjust the image width and height to suit your needs, this is the best way because it doesn't require JavaScript that can be disabled in the browser..
     
    JohnnySchultz, Oct 18, 2011 IP