HELP! How do I link small thumbnail to larger image on same page?

hello, everyone! I'm working in dreamweaver cs4 and am having no luck!
see below - I'm trying to link the small thumbnails to the larger image on the left. in other words, when a thumbnail is chosen it's corresponding image would open on the left. I have tried mouse-over effects and image swap behaviors but still no luck. either the larger image replaces the thumbnail or a brand new window opens up with the larger image.
I want all effects to stay on the same page. any help would be greatly appreciated!

Hi There:
Not sure how you have designed your page but here is a simple sample code on how you can do this with javascript and on mouseover event:
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#left {
display:none;
</style>
<script language="javascript" type="text/javascript">
<!--
function showImage(obj) { //v2.0
//alert(obj);
document.getElementById(obj).style.display='block';
//  return eval(obj)
function hideImage(obj) { //v2.0
//alert(obj);
document.getElementById(obj).style.display='none';
//  return eval(obj)
//-->
</script>
</head>
<body>
<div id="left" style="float:left;width:200px;"><img src="left.jpg" width="180" height="273" alt="large" /></div>
<div id="right" style="float:right;width:200px;"><img src="thumbnail.jpg" alt="small" style="cursor:pointer;" width="57" height="228" onmouseover="showImage('left');" onmouseout="hideImage('left');"/></div>
</body>
</html>
By default the bigger image is initally not there so I have added a display:none style in the head.
The above code will show the bigger image on left when you do a mouseover on the smaller left thumbnail image. Vice-versa when you move out the mouse the image goes away (you may not need this part). So on each thumbnail image simlarly pass the id of the image you want to show via the javascript showImage function.
Note: You can use onclick or other event per your preference.
Regards,
Vinay

Similar Messages

  • How do I link to a specific Hero Image in from another page?

    How do I link to a specific Hero Image from another page?

    Hi Laura,
    I am afraid that this is not possible in Muse at this stage, I will recommend that you post this on our ideas section over here, https://forums.adobe.com/community/muse/ideas, and let our devs team know of this requirement.
    As a work around I will suggest that you create a dedicated page with this panel opened when you publish and link that page with the text that you want. Let me know if you need more clarification on this.
    - Abhishek Maurya

  • Web Gallery - need file name on thumbnail and large image

    I think I have tried all the CS3 templates, but haven't found what our client is requesting. Is there a template that shows the file name on both the thumbnail and large image, and will make large images of 600-800 pixels (long dimension)?
    Thanks in advance,
    Dan Clark

    Thanks for your reply Nini. Yes, I had gone through all the presets and options. Was hoping I might have missed something, or that someone knew a trick/workaround. We've been using Table-Minimal for years, which is my overall favorite. I like to ability to make a large image, but it can't do what the client is requesting. They've made a list of selects from some very large galleries (200-300 shots each), and now want to jump directly to the shots they've previously chosen, in order to show their coworkers. I've also considered "Add Numeric Links", but I find that either confuses people, or they give me that number, instead of the file name/number, which makes a lot of extra work for us.

  • How do I duplicate or copy a table onto the same page?

    In Pages, how do I duplicate or copy a table onto the same page?

    option drag duplicates anything or copy and paste
    Peter

  • How do I get the thumbnails back on a new tab page?

    I get a AVG Secure Search page instead of the thumbnail page now when I load a new tab. How do I get the thumbnails back? I don't have an gear icon on the page to switch it back. This happen after I did a reset of Firefox so that MapQuest would work again which it now does.
    What is interesting is that I get thumbnails if I open a second Firefox window and then click on a new tap page.
    I've install the searchreset addon with no luck. I've run Microsoft Safety Scanner and no problems have been identified.

    Bookmark and use this;
    Download the '''[https://addons.mozilla.org/en-US/firefox/addon/searchreset/ Mozilla Search Reset]''' {web link}
    This add-on is very simple: on installation, it backs up
    and then resets your search preferences and home page
    to their default values, and then uninstalls itself. This
    affects the search bar, URL bar searches, and the home page.
    If you still have a problem, you may have add-ware on your system.
    Sometimes a problem with Firefox may be a result of malware installed on your computer, that you may not be aware of.
    You can try these free programs to scan for malware, which work with your existing antivirus software:
    * [http://www.microsoft.com/security/scanner/default.aspx Microsoft Safety Scanner]
    * [http://www.malwarebytes.org/products/malwarebytes_free/ MalwareBytes' Anti-Malware]
    * [http://support.kaspersky.com/viruses/disinfection/5350 Anti-Rootkit Utility - TDSSKiller]
    * [http://general-changelog-team.fr/en/downloads/viewdownload/20-outils-de-xplode/2-adwcleaner AdwCleaner] (for more info, see this [http://www.bleepingcomputer.com/download/adwcleaner/ alternate AdwCleaner download page])
    * [http://www.surfright.nl/en/hitmanpro/ Hitman Pro]
    * [http://www.eset.com/us/online-scanner/ ESET Online Scanner]
    [http://windows.microsoft.com/MSE Microsoft Security Essentials] is a good permanent antivirus for Windows 7/Vista/XP if you don't already have one.
    Further information can be found in the [[Troubleshoot Firefox issues caused by malware]] article.
    Did this fix your problems? Please report back to us!

  • How do I link to an anchor point  within a web page from within a PDF

    Hello,
    Can someone tell me how to link to an anchor point on a webpage from within a PDF?
    I created a page in Word and when i add my url with the # to reference the anchor eg. www.google.com/web#test1 and test the link it all works fine. I then create a PDF of this same page however the PDF seems to strip out the URL and looks to reference a file #test1.
    Any suggestions, ideas?
    Thanks

    see this post near the top . . . if you're using framesets you will scroll to the bottom of the page to see what they posted there.
    http://forums.adobe.com/message/628872#628872

  • How do I link to a specific place on a "different" page?

    I understand how a Named Anchor works on a given page. How do I click a link on one page, and go to a specific place on another page? Can that be done?
    Thanks!

    Same page anchor:
    <a href ="#anchoronthispage">
    Different page anchor:
    <a href="anotherpage.html#anotheranchor">

  • How do you link a button to a image on the same page?

    I created a photoshop button and pulled it into my Muse website, and I want to link it to an image on the same page. I have a slide show set up, and this way I could have a secondary menu with buttons corresponding to each image in the slideshow. I can only find the option to link the button to another page, or link it to an external website. Help!

    Hi avary.s
    "Image Option" : http://prntscr.com/svhz7  Tells that its actually the whole image that is being placed within this slide show container.http://prntscr.com/svhz7 check : http://prntscr.com/svine
    However, "Hero Image" as show in screen shot provided in above reply, is a container which shows the edited part of  the complete image : check :  http://projectuni01.businesscatalyst.com/screenshots/2013-02-16_0217.png
    So in this case, In slideshows, the links are actually get applied on Hero image or on the slideshow containers.
    I hope this information helps
    Regards
    Anshul Sharma

  • Can you create an image map that will link to a different element on the same page?

    I have used image maps before and know how to create an image map to link to a new page.  In this case, however, I want to be able to click on my image using an image map and load a new image with text on the same page as the image map.  Is this even possible?  Is there some sort of behavior that allows you to create same-page links, perhaps using AP divs?  I want the end result to be a type of gallery that loads different images depending on where you click on the main image.
    Again, I don't even know if this is possible.  Any suggestions on how to make this work would be greatly appreciated.
    Thank you!

    Go to this site and mouse over the image map of South America.
    http://alt-web.com/testing.html
    Is that what you are looking for?
    Insofar as linking to a position on the same page, do a Help search (F1) in DW for "named anchors."
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    www.alt-web.com/
    www.twitter.com/altweb
    www.alt-web.blogspot.com

  • Having trouble trying to link to an accordion panel on the same page

    Hello all,
    I've been following instructions on
    http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#EnablingKey boardNavigation
    to try to link to/open a specific panel in an accordion panel from a menu on the same page, but it's not working. Could somebody tell me what I'm doing wrong? My page-in-progress is:
    http://fleap.com/YGRpage2011.html#
    The menu on the right, under the word, "Details", is the one I'm trying to link to the accordion panel, and the panel itself is lower down the page.
    thanks very much for any help you can give me!
    Anna

    1. Remove the constructor in the HEAD section of your document
    var acc1 = new Spry.Widget.Accordion("SpryAccordion1", { useFixedPanelHeights: false });
    2. Change the HTML markup to the following
    <ul>
      <li><a href="#" onclick="Accordion1.openPanel(0); return false;"> how <span class="title">You've Got Rhythm</span> works</a></li>
      <li><a href="#" onclick="Accordion1.openPanel(1); return false;">sample pages</a></li>
      <li><a href="#" onclick="Accordion1.openPanel(2); return false;">reviews</a></li>
      <li><a href="#" onclick="Accordion1.openPanel(3); return false;">syllabus</a></li>
      <li>copying license</li>
      <li>about the authors</li>
      <li>tips</li>
      <li>cd tracks</li>
    </ul>
    Gramps

  • Thumbnail to larger image rollover

    In GoLive CS, now that I've learned how to do a regular rollover, I'm trying to do a rollover where a larger image appear (possibly with a brief caption) over or near a thumbnail image. I've searched other threads here about this with suggestions for Lightbox, etc. which I'll consider. But can this simply be done with GL alone? I tried it using the Rollovers and Actions palate but the larger image that appears over the thumbnail is no larger. Does Layers have something to do with a solution (never worked in Layers)? Perhaps there's a tutorial for this?

    In article <[email protected]>,<br /> Wayneswhirld <[email protected]> wrote:<br /><br />> It might work for me even though it seems to leave out the option of a <br />> caption in the larger image<br /><br />You can do that, too, by assigning another GL action to the trigger: <br />Text Swap (ID).<br /><br />First you need to assign an ID to the element - e.g. <p> or <div> - that <br />contains your text. Then add the action to the trigger link and in the <br />Inspector enter the name of the ID and the text you want displayed when <br />the action is triggered.<br /><br />I have two samples here, one on click the other on hover:<br /><a href=http://www.simnet.is/klipklap/golive/swaptext/><br /><a href=http://www.simnet.is/klipklap/golive/swaptext/sample.html><br /><br />-- <br />Cheers  Martin

  • How to set Preferences such that new tabs open to same page as active when Command-T was hit?

    On opening a new tab, the tab by default opens to thumbnails based on recent history. A la Safari, I want the new tab to open *to same page as was active when Command-T was hit*. What are the specific steps to take, to set as the default (preference), new pages to open to "Same page"? ("Same page" is Safari's check box in its Preferences.)
    Note, I have navigated available Mozilla Support, and using about:config have reset browser.newtab.url so that the new tab appears blank (discontinuing tracking of recent history for this purpose).
    Note, more importantly, I have found this Support Forum article, which, though challengingly written, has given me a temporary solution:
    * https://support.mozilla.org/en-US/questions/891635
    (The temporary solution for the Mac OS is to Command-click on the "Reload current page" icon in the url/Address box in the browser toolbar, which opens a new tab in the same window.)
    However, I would still like to set this as a permanent Preference, and would ask someone communicate a solution to me. Cheers, LeProf

    ''LeProf_7272 wrote:''
    if I can possibly just create a new config line
    You can't, which is why I suggested the above add-ons. There is no option in the UI or hidden preference in Firefox that can duplicate a tab whenever you open a new tab. ''browser.newtab.url'' can only be set to a fixed address, not whatever address happens to be open in the current tab.
    The are only two built-in methods for duplicating a tab:
    # Hold down the '''Option''' key and drag the tab to a new position on the tab bar.
    # Hold down the '''Command''' key and click the Reload button in the address bar.
    * [[Use mouse shortcuts to perform common tasks in Firefox]]
    You can make feature requests by filing enhancement bug reports, or by opening the Help menu and clicking Submit Feedback.
    * https://developer.mozilla.org/docs/Mozilla/QA/Bug_writing_guidelines
    * https://input.mozilla.org

  • How can I put report parameters and report on the same page?

    I want to have a page that has user input (text fields, checkboxes, radio buttons, etc.) at the top of the page, with a submit button. When the user submits the page, I want the resulting report (returned from a query) to display below the input area.
    With ASP or JSP I would write a page with a FORM at the top, with the ACTION submitting to the same page. If the ASP/JSP detects it was submitted (by looking at the request URL or form parameters), it queries the database and displays the report; otherwise it doesn't query the DB or show any report.
    How would I do this with with portlets?
    Thanks!

    <BLOCKQUOTE><font size="1" face="Verdana, Arial">quote:</font><HR>Originally posted by Hui Zeng ([email protected]):
    1. Create a form using the Appbuilder
    2. build a report
    3. create a dynamic page, in this page
    call the form, then query the databse:
    <oracle>
    begin
    portal30.wwa_app_module.new_instance(
    p_moduleid=>1060253649);
    end;
    </oracle>
    <p>
    <oracle>
    begin
    scott.example_report.show(
    p_arg_names=>portal30.wwv_standard_util.string_to_table('_show_header'),
    p_arg_values=>portal30.wwv_standard_util.string_to_table('NO')
    end;
    </oracle>
    4. expose this dynamic page as a portlet <HR></BLOCKQUOTE>
    I tried the above, but it didn't work. The form was displayed, but I couldn't find any way to make it go to the report. Is there something more that needs to be done? I'm new to Portal, so any help you can give me on entering parameters and passing them to a form (preferably on the same physical page) would be appreciated.
    null

  • Column link to  populate a form on the same page

    Hello all,
    Can anyone tell me how I can use a report column link -- that when the link is clicked will populate all of the text fields of my form which is on the SAME page? The form has about 10 fields, and their is only (3) Name/Value associations for a column link.
    Thanks,
    Jeff

    Great! Thanks for the advice. It appears that when you do that, it changes the column link attributes to a URL and puts the name/values in the URL -- when I first clicked on the link, it would not work -- said that it could not find item P6_FAX. I looked at the URL and then I deleted some of the spaces after the commas in the URL and it works great.
    Thanks!
    Jeff

  • How to keep vertically arranged fields to print on the same page?

    Hello,
    my report contains fields that are vertically arranged. I want the report to print all the fields on the same page and  not if the page is too small at the end that the half of the fields are printed on one page and the rest on the next page. But there should be more than one data sets on one page (it is no solution to generally make a page break before the fields - it only concerns the end of a page).
    Is there a printing mechanism to anchor fields together?
    Thanks in advance for your help.
    kind regards
    Monika Anna

    1. Are these vertically arranged fields within the same group?  If so, you can try right click on the Group section, Select Change Group, and then Go to Option Tab and select Change Group together.
    2. Otherwise, if you want to fit certain amount of rows into one page, then you can write your own running total and Set New Page when that running total reach eg: 20 rows.

Maybe you are looking for