picture mouse over that then shows larger picture

Discussion in 'HTML & Website Design' started by nicky s, Nov 17, 2008.

  1. #1
    i dont realy know how to explane it but i want my site to be able to do this.

    have image
    [​IMG]

    then when your mouse goes over it you will get this
    [​IMG]



    what code is it in ? also most of my site is made using i frames and i have to use css to edit things any one think they could help ?

    cheers nicky s
     
    nicky s, Nov 17, 2008 IP
  2. myst729

    myst729 Peon

    Messages:
    289
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Well... your screenshot is from TemplateMonster :D
    In this case you should use javascript I guess. That's also the way TM does.

    claim with this .js file
    http://www.templatemonster.com/js/preview_templates.js
    Code (markup):
    and invoke it in the page
    <script type="text/javascript">
         new TemplatePreview('tpl_21827', {
         title:  'Template 21827',
         src:    'http://images.templatemonster.com/screenshots/21800/21827-b.jpg',
         width:  430,
         height: 527      });
    </script>
    Code (markup):

    Just download the .js file and use it in TM's way, this is the easiest solution.
    Anyway, this javascript is not difficult to understand :)
     
    myst729, Nov 17, 2008 IP
  3. sampathsl

    sampathsl Guest

    Messages:
    861
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #3
    If you have built up your site using ASP.NET. Its just one step of the AJAX control toolkit. The tool is animation control extender.
     
    sampathsl, Nov 18, 2008 IP
  4. nicky s

    nicky s Peon

    Messages:
    199
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #4
    yea it from TM is there any chance you can embed JS in to css ??
     
    nicky s, Nov 18, 2008 IP
  5. !Unreal

    !Unreal Well-Known Member

    Messages:
    1,671
    Likes Received:
    27
    Best Answers:
    0
    Trophy Points:
    165
    #5
    !Unreal, Nov 18, 2008 IP
  6. nicky s

    nicky s Peon

    Messages:
    199
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #6
    wat the hell is in that file ?
     
    nicky s, Nov 18, 2008 IP
  7. nicky s

    nicky s Peon

    Messages:
    199
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #7
    i didnt have a clue what was in that file nothing i needed thought :(

    as i asked above can u put Js in to css ???
     
    nicky s, Nov 18, 2008 IP
  8. !Unreal

    !Unreal Well-Known Member

    Messages:
    1,671
    Likes Received:
    27
    Best Answers:
    0
    Trophy Points:
    165
    #8
    well look at index.html and it shows you. You can ignore the spry stuff, all that is is the spry css and javascript.
     
    !Unreal, Nov 18, 2008 IP
  9. saxDesigns

    saxDesigns Peon

    Messages:
    491
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    0
    #9
    No, they are two completely different types of code (although they do go together brilliantly!) :)

    You can include the two in the <head> area in your HTML, like so...

    <head>
    <script type="text/javascript">Blah, JS code goes here...</script>
    <style type="text/css">Blah, CSS code goes here...</style>
    </head>
    Code (markup):
    But external file linkage is recommended, like this...

    <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="script.js" language="javascript" type="text/javascript"></script>
    </head>
    Code (markup):
    Hope that helps!
     
    saxDesigns, Nov 18, 2008 IP
  10. nicky s

    nicky s Peon

    Messages:
    199
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #10
    i realy dont know that much about css or JS could you make the mouse over image in css or jsut JS ?
     
    nicky s, Nov 18, 2008 IP
  11. saxDesigns

    saxDesigns Peon

    Messages:
    491
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    0
    #11
    You would need JS to "activate" the feature, and CSS to style it (the borders on the box, box size, etc)
     
    saxDesigns, Nov 18, 2008 IP
  12. nicky s

    nicky s Peon

    Messages:
    199
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #12
    oh dnt look lik im going to do it then, so JS is to do things and css is for styling ?
     
    nicky s, Nov 18, 2008 IP
  13. saxDesigns

    saxDesigns Peon

    Messages:
    491
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Pretty much! :) All you gotta do is find the right JS for the thing you want to achieve (in this case have an image enlargement rollover). Those links that !Unreal look pretty handy to me. :)
     
    saxDesigns, Nov 18, 2008 IP
  14. nicky s

    nicky s Peon

    Messages:
    199
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #14
    cheers m8

    what you think of my site as it is ?
    www.nsrr-uk.com
     
    nicky s, Nov 18, 2008 IP
  15. relu_al

    relu_al Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #15
    Hello , please tell me if u have a solution that this can work on Explorer, because when is running explorer stop the script . Thanks u so much !

    Best regards !
     
    relu_al, Dec 12, 2008 IP