Advanced Search

Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Rollover image coding query

  1. #1
    Join Date
    Mar 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Rollover image coding query

    Good morning

    I am building a bank note website and want to have multiple images in a coloumn with their description, price, etc on the right. I have tried putting this info in a table but when clicking on the thumbnail to view a larger image the larger image appears and shunts all the table around and looks terrible. So i would like to insert this way of viewing a larger image used on ebay:

    ebay.co.uk/itm/New-Zealand-1981-1985-100-Note-UNIFACE-COLOR-TRIAL-X-2-UNC-/151008001880?pt=AU_Notes&hash=item2328c73f58

    Could someone supply me with the code to do this so I can copy this and put straight onto my page and just change the image names on the code provided? Many thanks for your time Gary
    Last edited by jscheuer1; 03-17-2013 at 04:14 PM. Reason: Format

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,882
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    Have you looked at the scripts available in the DD script library? There are many pre-made scripts there that you can use and all the code is provided upfront for you to copy and paste or download.

    Choose something from the galleries and viewers category and follow the installation guide on the demo pages: http://www.dynamicdrive.com/dynamicindex4/indexb.html

    If you need more help, please provide a link to your chosen DD script page and also a link to your own web page so we can see how you're setting it up. And if you are experiencing problems, please clearly state what issues you're having and what you'd like help with.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Mar 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi many thanks for your time I am new to this so a bit slow thanks

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,687
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

  5. #5
    Join Date
    Mar 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Trying to create a magnify image

    Hi John

    Many thanks for your thread I very much appreciate you reply the second option you sent http://www.dynamicdrive.com/dynamici...agemagnify.htm
    is absolutley perfect but I cannot seem to get it to work still, below is the code from my site that i have put in from the instructions from the link, i have also saved jquery.magnifier.js and magnify.sur in a new folder. I have put the code in, then inserted the image afghanistana1 which is a small image i want to be able to rollover to then see the larger one. I would really appreciate you having a look to see what I am doing wrong many thanks Gary




    <!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>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

    <script type="text/javascript" src="jquery.magnifier.js">

    /***********************************************
    * jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/

    </script>
    </head>

    <body>
    <img src="<img src="../Users/Gary/Documents/Banknote website/Images/Afganistan/A1.jpg" alt="A1" longdesc="../Users/Gary/Documents/Banknote website/Images/Afganistan/A1.jpg" />" class="magnify" style="width:200px; height:150px" />

    </body>
    </html>

  6. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,882
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    You have double img tags in your markup - hopefully correcting those will fix things. Try...;
    Code:
    <img src="../Users/Gary/Documents/Banknote website/Images/Afganistan/A1.jpg" alt="A1" class="magnify" style="width:200px; height:150px" />
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  7. #7
    Join Date
    Mar 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Beverleyh View Post
    You have double img tags in your markup - hopefully correcting those will fix things. Try...;
    Code:
    <img src="../Users/Gary/Documents/Banknote website/Images/Afganistan/A1.jpg" alt="A1" class="magnify" style="width:200px; height:150px" />
    Thanks very much for your reply i have changed the code to this but when opening in chrome it doesnt work thanks very much for your help

    <!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>ureka</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

    <script type="text/javascript" src="jquery.magnifier.js">

    /***********************************************
    * jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/

    </script>
    </head>

    <body>
    <img src="../Users/Gary/Documents/Banknote website/Images/Afganistan/A1.jpg" alt="A1" class="magnify" style="width:200px; height:150px" />
    </body>
    </html>

  8. #8
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,882
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    Can you post a link to your live page please? It will make troubleshooting easier to check script/image paths, etc. You can always upload it to a test folder and delete it when the problem is sorted.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  9. #9
    Join Date
    Mar 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi is this what you need? if i am becoming annoying please say and i will leave you alone thnaks

    file:///C:/Users/Gary/Documents/Banknote%20website/Images/Afganistan/ureka.html

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,687
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default

    Nope, that's only on your computer, we cannot see that page. We need a link to a live demo of the problem.

    If you want more help, please post a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Image rollover with power zoom shows wrong image
    By GrahamJBrown in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 03-14-2012, 03:05 PM
  2. Rollover Image setup with Text and Image Crawler Issue
    By solidsurfdan in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 10-26-2009, 06:05 AM
  3. Dom rollover query
    By r39913 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 09-09-2007, 09:13 PM
  4. Need coding help for Image enlarge..
    By forum in forum JavaScript
    Replies: 1
    Last Post: 04-15-2007, 03:49 AM
  5. Help coding XHTML image map
    By rhianoran in forum HTML
    Replies: 9
    Last Post: 10-22-2006, 11:25 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •