Using hotspots to swap an image

I'm using DW CS3 and I have a page that has several employee photos on it.  I would like for people to be able to roll over a photo and the area to the right of the photos display a bio of that person.  Then on roll out, have it restore back to the original photo.  Is there a way to create a hotspot on each photo to do this?  Or is there a way to make an image cause a different image on the page to swap when it's rolled over?
Thanks.

Sorry, I was trying to make my question more simple, so I neglected to describe exactly what I was trying to do.  I wanted the text block to swap depending on which employee photo the user rolled their mouse over, but the photos themselves were actually part of a larger image that I didn't want to also be a trigger.
To be more exact, two of the photos are actually part of one image and the other two are part of another image, so the hotspots make it so that it works only when the user hovers over a specific employee photo.
Sorry for the confusion, but thanks again for the help.

Similar Messages

  • Using text to swap an image (disjointed rollover)

    Hi,
    I have some text on my page which is also a link.
    It has a background colour, which changes when my mouse hovers over it.
    I also want one image on the page to swap with another image when my mouse hovers over the text.
    Please can someone direct me to a website which discusses how to create a disjointed rollover using TEXT rather than an image.
    Thank you in advance

    Stuart Smitheringale wrote: You can see the effect that I have created at this site http://www.drivertrainingcompany.com
    Ideally, I would like to use CSS to create the same effect, without relying on swapping images.
    As there are often many ways to produce the same effect or behavior, each with its own advantages and disadvantages, having been able to produce the effect or behavior is often more important.
    Except for one matter in your page's behavior that you will probably want to change your page appears fine in the most recent versions of Safari, Firefox, and Opera.  The bigger problem at this point is that you need to clean up your HTML -- something to which Murray has already alluded.
    LESS THAN PERFECT BEHAVIOR
    When your mouse leaves one menu item to enter into the next, the words below your menu item change as you would probably like, but the previously highlighted menu item remains highlighted.  There is not a clean transition between menu items.  This problem can probably be fixed with an onmouseout event.
    CLEAN UP TIME
    Please refer to the validation link that I have provided below.  It will show you that there are structural problems in your page that can affect both the operation and appearance of your page as it is viewed in different browsers and in different versions of the same browser over time.  I have only checked three of the more popular browsers for you.
    SUGGESTION
    Clean up your structural problems first and see if the imperfect behavior described above does not disappear.  If it does not, then return with a new question, and someone will provide a fix, if you are yourself unable.
    VALIDATION LINK:  http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.drivertrainingcompany.com%2F
    Roddy

  • Using List to Swap Images

    Hi, I had a quick questiong
    I am fairly new to Dreamweaver and was wondering if anyone
    knows of any tutorials that show how to use a List to swap an image
    in the middle of the screen. For example I want to have a list with
    different tile colors that will change the image of a tile that is
    in the middle to that of those colors.

    Sure...what you are looking for is called a "Disjointed
    Rollover"
    Here is a good tutorial:
    http://www.dwfaq.com/tutorials/basics/disjointed.asp
    Let us know if this is what you wanted.
    "Yoyi3d" <[email protected]> wrote in
    message
    news:ercp4p$off$[email protected]..
    > Hi, I had a quick questiong
    >
    > I am fairly new to Dreamweaver and was wondering if
    anyone knows of any
    > tutorials that show how to use a List to swap an image
    in the middle of
    > the
    > screen. For example I want to have a list with different
    tile colors that
    > will
    > change the image of a tile that is in the middle to that
    of those colors.
    >

  • Using Dreamweaver CC 2014. I add hotspots and links my images with no problem. But when it renders live, the links are just a little off.

    Am using the Hotspot tool to map images and link them. But when I test the email or webpage, the links are just slightly off. Thoughts?

    Don't really have it in a format that has a link. But here is the HTML: (and no, it's not in a table. Would that help?)
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>NewNeutralWSale10-21-14</title>
    <style type="text/css">
    area {
      outline: none;
    </style>
    </head>
    <body>
    <div align="center">
    <img src="https://system.netsuite.com/core/media/media.nl?id=961585&c=1259335&h=4da03f3688efdbd89b27" alt="" width="800" height="2345" usemap="#Map"/>
    <map name="Map">
      <area shape="rect" coords="3,5,162,161" href="http://www.blisshomeanddesign.com/" target="_blank" alt="BlissHomePage">
      <area shape="poly" coords="163,22,772,22,773,895,25,894,27,167,166,164" href="http://www.blisshomeanddesign.com/The-New-Neutral/" target="_blank" alt="NewNeutralPage">
      <area shape="rect" coords="71,1404,330,1475" href="http://www.blisshomeanddesign.com/PROMOTIONS/The-New-Neutral/Oxford-Pillow.html" target="_blank" alt="Pillow">
      <area shape="poly" coords="389,1125,405,1129,415,1135,429,1130,459,1134,490,1139,526,1139,552,1138,581,1136, 599,1134,623,1140,647,1136,676,1138,699,1130,721,1123,732,1125,728,1142,722,1164,712,1179, 718,1202,717,1228,707,1253,714,1294,722,1338,726,1365,730,1401,728,1423,739,1437,739,1449, 743,1458,729,1465,705,1456,680,1453,652,1451,617,1451,594,1452,569,1444,550,1448,522,1448, 501,1445,471,1446,458,1443,432,1449,410,1456,389,1458,381,1456,388,1438,393,1417,395,1399, 400,1379,404,1344,406,1320,406,1276,401,1221,398,1171" href="http://www.blisshomeanddesign.com/PROMOTIONS/The-New-Neutral/Oxford-Pillow.html" target="_blank" alt="Pillow">
      <area shape="poly" coords="45,995,408,994,408,1126,392,1120,386,1127,393,1152,397,1185,398,1218,397,1251,402 ,1272,402,1293,400,1323,400,1348,398,1375,44,1375" href="http://www.blisshomeanddesign.com/PROMOTIONS/The-New-Neutral/Decorative-Finial-Boxes-Set-o f-4.html" target="_blank" alt="Finials">
      <area shape="rect" coords="428,1028,769,1091" href="http://www.blisshomeanddesign.com/PROMOTIONS/The-New-Neutral/Decorative-Finial-Boxes-Set-o f-4.html" target="_blank" alt="Finials">
      <area shape="rect" coords="152,1519,658,1894" href="http://www.blisshomeanddesign.com/PROMOTIONS/The-New-Neutral/Isabella-Console-Tarnished-Si lver.html" target="_blank" alt="Console">
      <area shape="rect" coords="78,1947,727,2035" href="http://www.blisshomeanddesign.com/" target="_blank" alt="BlissHomePage">
      <area shape="rect" coords="129,2115,256,2134" href="http://www.blisshomeanddesign.com/NEW-ARRIVALS/" target="_blank" alt="NewArrivals">
      <area shape="rect" coords="286,2115,388,2133" href="http://www.blisshomeanddesign.com/FURNITURE/" target="_blank" alt="Furniture">
      <area shape="rect" coords="416,2115,505,2133" href="http://www.blisshomeanddesign.com/LIGHTING/" target="_blank" alt="Lighting">
      <area shape="rect" coords="531,2114,647,2133" href="http://www.blisshomeanddesign.com/ACCESSORIES/" target="_blank" alt="Accessories">
      <area shape="rect" coords="256,2152,339,2172" href="http://www.blisshomeanddesign.com/BEDDING/" target="_blank" alt="Bedding">
      <area shape="rect" coords="366,2153,458,2173" href="http://www.blisshomeanddesign.com/SPA/" target="_blank" alt="Spa">
      <area shape="rect" coords="485,2149,630,2172" href="http://www.blisshomeanddesign.com/KITCHEN-AND-DINING/" target="_blank" alt="KitchenDining">
      <area shape="rect" coords="313,2231,332,2266" href="https://www.facebook.com/BlissHomeAndDesign" target="_blank" alt="Facebook">
      <area shape="rect" coords="346,2233,368,2266" href="http://www.pinterest.com/blisshomedesign/" target="_blank" alt="Pinterest">
      <area shape="rect" coords="379,2236,411,2263" href="https://twitter.com/BlissHomeDesign" target="_blank" alt="Twitter">
      <area shape="rect" coords="422,2230,450,2262" href="http://instagram.com/blisshomeanddesign/" target="_blank" alt="Instagram">
      <area shape="rect" coords="454,2235,482,2263" href="https://plus.google.com/+Blisshomeanddesign/posts" target="_blank" alt="GooglePlus">
      <area shape="rect" coords="285,2267,504,2328" href="http://www.blisshomeanddesign.com/CONTACT-INFORMATION/" target="_blank" alt="Contact">
      <area shape="rect" coords="161,2151,230,2177" href="http://www.blisshomeanddesign.com/DECOR/" target="_blank" alt="Decor">
    </map>
    </div>
    </body>
    </html>

  • Swap Background image using ActionScript

    I need to know how to change (swap) background images.
    Explanation:
    The main file (level 0) is named "Master".
    In the Master timeline, the lowest layer is named "bg" (for
    backgrround).
    On the bg layer is an image the size of the stage, and this
    image forms the background against which other movie clips (.swf)
    are shown.
    Purpose:
    In response to a user (ie: the user clicks a button), I want
    to change the background image.
    Problem:
    I have searched through Flash 8 Help system, and cannot find
    how to delete the 1st image from the "bg" layer, and add a
    different image.
    Hoping someone knows the answer,
    Thanks,
    John

    convert your image to a movieclip. you can then use
    movieclipInstanceName.removeMovieClip() to remove it. or, if you
    might want to use it latter in your swf, change its _visible
    property.

  • Image Swap + Click Image Swap & Restore Help

    Hi everyone,
    I'm having trouble figuring this out and was hoping someone could help me with the code. What I currently have is a world map for my books. What I want is to have several hotspots that change the image (the world map) in five ways.
    1. When the mouse goes over a continent it swaps the image of the continent with a rollover, letting you know that continent is clickable.
    2. When the mouse goes out of the continent it restores back to the original image of the world map.
    3. When you click the continent it swaps to a "zoomed in" image of the continent.
    4. The image in #3 (zoomed-in) stays on screen until clicked. Once clicked it then returns to the original image (the world map).
    5. When the continent is double-clicked it sends you to a separate browser with that continent.
    I've got all of them figure out except for #4. As soon as the mouse moves out of the hotspot, the "zoomed-in" image returns to the original image.
    Here is the link to what I have so far: http://christopherdeldridge.com/Photo%20World%20Map.html
    Here is the code I have for one of the hostpots for one of the continets:
    <area shape="poly" coords="335,145,310,134,280,137,255,141,231,144,196,147,170,143,132,146,127,174,144,188,1 64,211,188,211,208,213,231,216,265,217,272,234,295,240,316,227,343,225,357,241,368,226,364 ,203,347,195,315,196,288,198,264,202,246,200,241,171,288,163,315,156" alt="" style="cursor: pointer;" onclick="MM_swapImage('ZenitaSatellite','','Pics/Satellite Map 2/WestVadra 2.gif',1)" ondblclick="MM_openBrWindow('Vadra Photo.html','','')"  onmouseover="MM_swapImage('ZenitaSatellite','','Pics/Satellite Map/WVadra.gif',1)" onmouseout="MM_swapImgRestore()"  />
    Thanks for the help...

    While looking through your code I see several things you should change:
    1.  Your CSS is flawed -
    <style type="text/css" media="all">
    <!--
    .hiddenlink {
    color: #000; /* same color as the surrounding text */
    text-decoration: none; /* to remove the underline */
    cursor: auto; /* to make the cursor stay as the auto cursor, not the hand */
    -->
    <style type="text/css">td img {display: block;}
    .auto-style1 {
    Note that the .hiddenlink rule does not have a closing "}", and that there is an improper opening <style> tag embedded there immediately before the 'td img' rule.
    2.  I also note your liberal use of file/pathnames containing spaces - this is a bad practice as some browsers will assume that a space is the end of the file/pathname.
    Anyhow, I have not tested this but it should work.  You need to set up a toggle on the onclick event call so that you can know which image to load, like this -
    <area shape="poly" coords="622,367,592,366,566,373,542,381,527,391,531,407,556,421,592,424,622,411" alt="" style="cursor: pointer;" onclick="if(alekandria==1){MM_swapImage('ZenitaSatellite','','http://christopherdeldridge.com/Pics/Satellite Map 2/Alakandria 2.gif',1);alekandria=0;} else { MM_swapImage('ZenitaSatellite','','http://christopherdeldridge.com/Pics/Satellite Map 2/Alakandria.gif',1);alekandria=1;" ondblclick="MM_openBrWindow('Alakandria Photo.html','','')"  onmouseover="MM_swapImage('ZenitaSatellite','','http://christopherdeldridge.com/Pics/Satellite Map/Alakandria.gif',1)" onmouseout="MM_swapImgRestore()"  />
    So - when you click on the image, the value of the toggle (a variable specific to that particular image) is tested.  If its value is 1, the image has already been expanded, and you need to swap in the unexpanded image.  You also set the value of the toggle to 0.  If its value is 0, the image is unexpanded, and you need to swap in the expanded image.  You also set the value of the toggle to 1.
    Get it?

  • Making a swapped in image then swap an image

    Ok,
    I've got my website all put together but I cannot for the life of me figure out how to do this next thing. I'm an illustrator so I have a website where the right hand side has thumbnails - those thumbnails swap an image to the main 'stage'. They also swap in a row of detail thumbnails on the bottom. In an ideal world, the viewer would click a thumnail on the right hand side - an image would appear on the 'stage' and a little row of smaller thumbnails will appear below the image (I got this part fine). Then they could click the thumbnails at the bottom and detailed images of the original illustration would swap onto the 'stage. Then the could click another image on the right hand side and the same thing would happen but with a new image, and new details. This is all fine and well, but I cannot figure out how to get those swapped in thumbnails (at the bottom) to then swap detail images to the 'stage'. I can't select them to assign the behavior because they don't exist until they are swapped in. I can't name them or find them when I click the 'swap image' behavior. If I assign a behavior to the placeholder I can't figure out how to change it for each image.
    Please help!

    This is a pretty complex situation, and is the ideal application for use of the SetText of Element behavior.
    The idea is that you can paste HTML into the behavior to accomplish these rollover rollovers.  Here is a link to an old demonstration of how to use its predecessor (SetTextofLayer) - http://www.dreamweaverresources.com/tutorials/settextoflayer.htm
    To really understand what is happening, you'll need to look at the code, too....

  • Photo flow object not using thumbnails, only the primary image

    I'm currently evaluating the trial version of this to see if it's something we can tweak to the way we'd like it, and I can't seem to get the object to use the thumbnail views (presumably for the angled views to either side of the centered image).  What we're trying to do is to use a version of the image with a fixed location "tool tip" above it when it's centered and displayed at the full size, but use a "thumbnail" image that doesn't have this.  The intention is when an image is centered, a box will be above the image with a brief description (the powers that be want it stationary rather than hover with the mouse location), but the thumbnail views to either side will not have it.
    The link to the page using it is www.perleyhalladay.com/beta/index.html, and the XML file is www.perleyhalladay.com/beta/PhotoFlow/gallery.xml.  "magesFolder" is set to PhotoShow/images (relative to the location of index.html), and the images load fine...it's just that I've tried swapping thumbnail images to mix them up (even with the example version I downloaded), and it seems as though it's using the primary image for both the thumbnails and the centered version.  Is there a variable missing from the XML file or a PARAM missing from the HTML file that would enable/disable the use of thumbnails globally.
    Is this perhaps an undocumented limitation in the trial download version that would be remedied in the paid version, or is there something else amiss?

    If you are addressing some applicarion that someone created and is selling, you'll need to contact the seller to get details about their product.

  • Does anyone know how to display (in LabVIEW) the memory use during execution of an image and data acquisition VI to predict when it is time to cease the acquisition to prevent the program crashing?

    Does anyone know how to display (in LabVIEW) the memory use during execution of an image and data acquisition VI to predict when it is time to cease the acquisition to prevent the program crashing?
    I am acquiring images and data to a buffer on the edge of the while loop, and am finding that the crashing of the program is unpredictable, but almost always due to a memory saturation when the buffers gets too big.
    I have attached the VI.
    Thanks for the help
    Attachments:
    new_control_and_acquisition_program.vi ‏946 KB

    Take a look at this document that discusses how to monitor IMAQ memory usage:
    http://digital.ni.com/public.nsf/websearch/8C6E405861C60DE786256DB400755957
    Hope this helps -
    Julie

  • How can I increase the thumbnail size when using Safari to upload an image to a website?

    I upload many images to multiple websites and when using Safari to upload these images, the thumbnails are so small I can barely make out what the image is. I can easily figure out how to increase the thumbnail size when viewing them in Finder and set the default to my liking, but I cannot seem to find a way to do this in Safari. The last topic I saw on this was form 2013 and have not seen any update. Is there a way to do this?

    Delete all unused, invisible layers.
    Sometimes zip compression is better than jpg compression (in the pdf output settings). Zip is lossless, and works better with non gradient colour or no images.
    Flattening the image before you save it to pdf can reduce the file size if you are using jpg compression.
    Post a preview of your pdf and we can comment further on how to reduce the file size.

  • I had this video file and I was trying to flip it to a format that would work with iMovie.  It used to have the Quicktime image with it.  So, I assume it was a QT file.  But, somehow I've changed the file from a video to a folder.

    I had a video file and I was trying to flip it to a format that would work with iMovie.  It used to have the Quicktime image with it.  So, I assume it was a QT file.  But, somehow I've changed the file from a video to a folder.  I've tried to undo the action.  No luck.  I wasn't running my Time Machine.  So, I can't go back.  Help.  It's the only copy of this video.

    I've tried to undo the action.
    How?
    Please detail ALL you have done so far in the way of troubleshooting?   Need this info to avoid the been there done that scenarios.
    it's the only copy of this video.
    Where did you get the video from?
    From the pic I noticed that the folder is 841.9mb.  What's inside?  Or what happens when you click on it?

  • When using private browsing to view image results in Safari 5.1.3, only the first two rows of results are visible, the following four or so rows display greyed out place holders, and the safe search button is inoperable. Suggestions?

    When using private browsing to view image results in Safari 5.1.3, only the first two rows of results are visible, the following four or so rows display greyed out place holders, the remainder of the results page is blank, and the safe search button is inoperable. When I turn off private browsing and refresh the page, everything works again.
    Anyone else having this problem?

    I have got the same behaviour after the last Safari Update to 5.1.3. It seems that Safari now handles some scripts in a new way. If you debug the Google Website, you will see, that there is some Javascript Error, that seems to prevent to write into local cache. After some searching I wasn't able to finde a solution for this problem, other then disabling Javascript while private browsing to prevent the script loading. You then are able to use Google with the old layout. The option to disable JavaScript can be found in the Menu "Developer", wich has to be enabled in Safari in the options first.
    In my opinion this is a bug that is now occuring, because Apple changed something in private browsing and that has to be fixed by Google now, to run again. Or we will have to wait for 5.1.4, as you can read online Apple will change and bugfix the javascript engine in that version, perhaps this fixes the problem as well. I hope so!
    If anyone is in the developer program perhaps you could test this with the beta of 5.1.4 and tell us if it works.

  • Using iPhoto 08 editor causes image to be blurry.

    When using iPhoto 08 to edit images, the photo and thumbnail become blurry but when the images is dragged onto the desktop and is viewed with Preview the image is clear but with out the modifications made during the edit in iPhoto. Any suggestions?

    Someone posted a great answer to this dilemma that so many of us are having with iPhoto. I don't want to steal credit for the solution, so I'm providing a link to his solution which appears in another thread on this forum:
    https://discussions.apple.com/message/23938331?ac_cid=tw123456#23938331
    Yahoo!
    Monica Ricci

  • Slow mobile internet (but it's faster on PC using hotspot) :/ ?

    I guess I'm one of the lucky users because tethering is working on my Xray. I always use hotspot as I find it faster than tethering. And (I don't know if it's just me but) I think the connection is faster when using hotspot than tethering. And also I can't use any internet app on my phone except Opera. The Youtube, stock browser, FB, Gplay app is not loading (mobile data). But on my PC everything works fine, (connected to hotspot [mobile data]) I can watch videos on Youtube and download on internet. What could be the problem?

    have you repaired your phone with either SUS or PCC?
    Update Service (SUS)
    http://www.sonymobile.com/gb/tools/update-service/
    http://www-support-downloads.sonymobile.com/Software%20Downloads/Update_Service_Setup-2.11.12.5.exe
    Alternatives on How to backup Xperias
    http://talk.sonymobile.com/thread/36355
    Don't forget to mark the Correct Answers & Helpful Answers
    "I'd rather be hated for who I am, than loved for who I am not." Kurt Cobain (1967-1994)

  • Using Power Query to import image files for Power View

    I am trying to use Power Query to import image data from a SQL Azure database for use in Power View.  I've selected both the source image table and the ?images table in the workbook query.  The files seem to load as binary data in the Power
    Query editor but when loaded to the data model with Power Pivot, the field becomes "text" type rather than binary.  Does anyone know the procedure to use  PowerQuery to load image files into PowerPivot?

    Hi,
    We currently do not support loading binary data from Power Query into the Power Pivot data model. This is something we'd like to address soon. For now, you will need to use the Power Pivot import capabilities if you want to achieve this.
    Sorry about the inconvenience - we will try to enable this feature over the coming months.
    Faisal Mohamood | Program Manager | Data Platform Group - Microsoft

Maybe you are looking for