Text List Highlights Area of an Image

Hi All,
I have an image of a printed circuit board with many components.  I would like to help people find those components by having a text list to the right of the image, then if you click or hover over the text, the component is highlighted in the circuit board image.
Another way of looking at it:  I have a map of the United States with an alphabetic list of states to the right.  When you click or hover on a states name, the state is highlighted on the image. 
What is important to note is that I'm not hovering over the image.  I'm string help people locate something on the image by having an alphabetical list that will highlight something on an image so they can find it.
How would I do this?  What CS6 product do I even start with.  I assume dreamweaver?  Can I do this with a CSS rather than JS?
Thanks!
Mike

This image is basically this except with a few more components (about 100).
http://www.hairballaudio.com/blog/wp-content/uploads/2014/07/Elements_PCB.jpg
I actually found exactly what I want to do here:
Demonstration of boundList feature - JSFiddle
Seems like I can create the image map in Dreamwever then control and make a list with the script.
Mike

Similar Messages

  • In the process of reformatting my macbook pro, I saved everything but my keyword list.  The keywords are with the images, but the total list I use under "Keywords" is not present.  Is there a way to re-create all my keywords I've used over the last 6 year

    In the process of reformatting my macbook pro, I saved everything but my keyword list.  The keywords are with the images, but the total list I use under "Keywords" is not present.  Is there a way to re-create all my keywords I've used over the last 6 years.

    I accomplished what I needed last night.  I remembered I had picked my favorite images from each year and put them in a "favorite" folder by year.  These folders included 500 to 1200 images per year.  I pulled up the folder for each year and highlighted all images and clicked on "Keywords" and all keywords used for all images were listed.  I made those keywords persistent.  It took me a while to realize I had to click on each keyword to make it persistent.  After doing this for all years, I assume 95% of all keywords I have used over the many years were back in my list.  I'm sure there is probably a more "technical" way to accomplish what I needed, but this seems to have worked.  I also exported my list into a word document and is saved on my hard drive.
    If I had not made folders with my favorite images for each year, I could not have used this method, so if you figure out a better way, I like to hear it.  Thanks for your comments and willingness to help.

  • IS there a way to fix the issue with text list boxes where they shift (empty space is smaller than the text size) when two text lsit boxes are side by side?

    Currently I have a webpage I designed for a company where I have multiple text list boxes side by side for the purpose of displaying data in each one based on a category in the database. So a text list box for the primary key, name, serial number, etc. I have to use Firefox as it typically works best for printing and functionality for the page. The single issue we are having is that in Firefox if the field is null as far as text the text are shrinks meaning all the data in that list box shifts up and is no longer in line with its congruent data in the other text list boxes. In other browsers that's not a problem and everything stays lined up regardless of whether there's text in the box or not.
    Unfortunately I cannot provide a link but if contacted I will provide screen shots.

    Try posting at the Web Development / Standards Evangelism forum at MozillaZine. The helpers over there are more knowledgeable about web page development issues with Firefox. <br />
    http://forums.mozillazine.org/viewforum.php?f=25 <br />
    You'll need to register and login to be able to post in that forum.

  • Why are my attachment images being embedded as distorted thumbnails in the body of the text in Mac Mail?

    Why are my attachment images being embedded as distorted thumbnails in the body of the text in Mac Mail? How can I attach image files as normal attachments?

    Attachments – Disable Embedded Attachments

  • How can I highlight areas of text that I've downloaded?

    This has just got to be easy . . . am I missing something obvious?
    If I've downloaded a document from the internet for my own reference, and I want to highlight areas of text, how can I do that without buying an app>
    MacBook Air
    Version 10.8.2
    Safari
    Version 6.0.1

    A .pdf document.
    Let me give you an example . . . an article that I'd like to share with a family member and call attention to (highlight) a few words of the text.
    Message was edited by: ApostrapheS

  • Witing 'negative image' text on copper areas?

    Hello,
    I am having trouble with text on copper areas.
    I was wanting to write in the copper area- but with the text being taken way from the copper (negative image). I dont want the box around the text.
    I have attached 2 pictures- one is what I have- the other is what I want.
    Is there any way of doing this?
    Thanks
    Attachments:
    Copper text.jpg ‏24 KB
    what I want.jpg ‏22 KB

    I think I see what you are doing. Placing a picture is placing copper, so you don't need a power plane. If there is a power place, you are essentially placing copper on top of copper, which just gives you combined. You can't 'subtract' the picture from the power plane, but if you turn the power place into a copper area, you can remove the area that has the picture. (To turn a power plan into a copper area, use the polygon splitter. When you remove the area, the power plane becomes a copper area.)
    Garret
    Senior Software Developer
    National Instruments
    Circuit Design Community and Blog
    If someone helped you, let them know. Mark as solved or give a kudo.

  • Acrobat 9 - How to highlight portions of an image?

    As my screen name suggests, I am not well versed in Acrobat 9.  I am attempting to highlight areas of an application that we send out to our students.  Apparantly the portion of the application in the PDF that I am attempting to highlight is part of an image and not text.  Other text portions of the PDF can be highlighted with the highlighting tool, just not the image.  Does anyone have any ideas?  Thanks in advance for your help!

    You can try one of the tools, like Rectangle Tool, Polygon Tool.

  • How to separate content area from the image area in cs6

    how to separate content area from the image area in cs6? looks just fine in design view but when opened up in explorer my text /content area is over the image area. the content is suppose to be below the image not over it. How do I move it down? Everything I have tried has not worked ;(

    Is your image in the CSS (background) or the HTML (foreground)? 
    Try copying and pasting this code into a new, blank document.  Change placehold.it images to your own.  Save and preview in browsers.
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5 with CSS 2-Col Layout</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <![endif]-->
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <style>
    /**CSS Reset**/
        padding: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    img {
        width: 100%;
        vertical-align: baseline;
    /**Layout**/
    body {
        padding: 0;
        width: 90%; /**adjust width in px or % as desired**/
        margin: 0 auto; /**this is centered**/
        background: #CFF;
        color: #505050;
        font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
        font-size: 100%;
        box-shadow: 2px 2px 4px #333;
    header {
        margin: 0;
        padding: 0 1%;
        width: 100%;
        background: #B00202;
        color: #FFF;
    /**top menu**/
    nav {
        background: #EAEAEA;
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 14px;
        font-weight: bold
    nav ul {
        margin: 0;
        padding: 0;
    nav li {
        list-style: none;
        display: inline-block;
        margin: 0 3% 0 5%;
    /**menu link styles**/
    nav li a {
        color: #666;
        text-decoration: none;
        line-height: 2.5em;
        padding: 6px;
        border: 1px solid #CCC;
    /**on select or mouseover**/
    nav li a:hover, nav li a:active, nav li a:focus {
        background: #CCC;
        color: #505050;
    #wrapper {
        background: #EAEAEA;
        overflow: hidden; /**float contaiment**/
    /**main content**/
    article {
        padding: 0 2%;
        background: #FFF;
        float: left;
        width: 70%;
    figure {
        width: 80%;
        margin: 4% auto 4% auto;
        text-align: center;
    /**right sidebar**/
    aside {
        padding: 0 2%;
        float: left;
        width: 30%;
    footer {
        clear: both;
        background: #B00202;
        color: #FFF;
        text-align: center;
        margin: 0;
    /**typography**/
    header h1, header h2 {
        display: inline;
        color: #F5DD83;
        padding: 0 1%;
    h3 {
        color: #2294AE;
        margin-bottom: 0
    p { margin: 0 0 1em 0 }
    figcaption {
        text-align: center;
        font-style: oblique;
        font-size: small;
        color: #2294AE;
    </style>
    </head>
    <body>
    <!--begin header-->
    <header> <h1>Sitename</h1>
    <h2>|  Responsive CSS Layout</h2>
    </header>
    <!--begin navigation-->
    <nav>
    <ul>
    <li><a href="#">Menu Item1</a></li>
    <li><a href="#">Menu Item1</a></li>
    <li><a href="#">Menu Item1</a></li>
    <li><a href="#">Menu Item1</a></li>
    <li><a href="#">Menu Item1</a></li>
    </ul>
    </nav>
    <div id="wrapper">
    <!--begin main content-->
    <img class="banner" src="http://placehold.it/1056x100/198EBA/FFFFFF&text=Banner.jpg" alt="banner" />
    <article> <h3>Article</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>
    <figure> <img src="http://placehold.it/500x325" alt="placeholder">
    <figcaption>Figure 2 Caption</figcaption>
    </figure>
    </article>
    <!--begin right sidebar-->
    <aside> <h3>Aside</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. </p>
    <hr>
    <p>Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>
    <hr>
    <p>Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>
    </aside>
    <!--end wrapper--></div>
    <!--begin footer-->
    <footer> <small>© 2014 Your Site Name. All rights reserved</small> </footer>
    </body>
    </html>
    Nancy O.

  • Selecting text for highlighting

    Why am I able in some documents to use a bar cursor that allows me to block text, while in other documents all I get is a x-pointer that does not allow me to block text for highlighting?

    Block?  You can only select and highlight documents that actually contain text; you cannot do that with scanned documents (images), unless they are OCRed.

  • Dynamically update values in Text Lists for typed measures

    Hi,
    We have an alpha-numeric data column in our fact table. This is a data coulmn and we want to store its content as data value in one of the measures. The value in this column is highly dynamic and it is not restricted to a fixed set of values. To store the values we need to use typed measures, but is there way in which I can define the text list itself dynamically? Meaning, we will build the text list dynamically as and when the data comes in the fact table. Is this possible. We are using 11.1.2.1.
    Regards,
    Krishna

    I don't think we have a MaxL (I can be worng) to update Text Lists. You can try creating .slt file dynamically and then manually import them before data load.
    .slt will have entries like
    #MISSING NoData
    #OUTOFRANGE OutOfRange
    3 Bad
    2 Average
    1 Good
    Edited by: Celvin Kattookaran on Mar 21, 2013 12:33 PM

  • Updated to Maverick, had a desktop folder for pictures I had transferred from my PC. That folder is gone, no icons in Pictures in Finder but the photos are still in images in All My Files! How do I get the organized folder back?

    I had transferred all my photo files from my PC when I got my Mac Air. They were in a desktop folder all nicely organized in files (event, dates, etc.) That desktop folder is now gone after the Maverick update. When I click on Pictures in finder it comes up empty (not even a link to Iphoto)  I had not put these pictures in iphoto yet. Before Mavericks when I clicked on Pictures the Iphoto icon and my folder showed up. My Iphoto itself is working fine and and those pictures are still intact. I know the pictures are on my Mac because they are all in Images, but they are no longer organized and are no longer in sequence. I would like to know if I my "intact" folder may still be somewhere on my computer. If not what is the best and most efficient way to get those photos from the images only file to Iphoto?

    I actually just noticed the "media" option is no longer listed along the left side of Finder. I think that is where I accessed iphoto and my other picture folder.
    There is no media option in the Finder. That only turns up in Open... Dialogues like this:

  • Help - text boxes/highlighting hidden unless selected in Acrobat Pro 9.2

    I am working Acrobat Pro 9.2. When I insert a text box, it disappears when I click somewhere else.  I can only tell it's there If I hover over it - I get a black mouse arrow.  If I click on it and select it, then I can see the text and border, but if I click anywhere else, it disappears.  I've tried all the options and settings I can find.  It is set to show, not hide, all comments and text boxes.  Also, when I try to highlight regular text, it puts a little yellow, symbol above my text but does not highlight the text.  When I roll the mouse over it, a yellow note pops up with the text I highlighted, but when I move the mouse away, nothing is highlighted.  Again, I've tried changing all of the settings I can find related to highlighting but nothing works.  I use Acrobat on other computers and have used both text boxes and highlighting without any problem.  Is this due to a setting somewhere, or is there something wrong with my installation of Adobe?   Thanks.

    Something to check.
    To have text selected by the Highlight tool placed into the annotation's pop-up:
    Preferences > select Category "Commenting"
    There are three panes of configuration options.
    --| View Comments
    --| Pop-Up Open Behavior
    --| Making Comments
    Tick the last option (Copy selected text into Highlight, Cross-Out, and Underline comment pop-ups) in the third pane.
    Play with the other options as you may find others that are very useful.
    For form fields:
    Preferences > select Category "Forms"
    In the first pane (General), select "Show focus rectangle".
    In the second pane (Highlight Color) select "Show border hover color for fields".
    Be well...

  • We are currently looking for a way to link images to a design file within programs like InDesign and Illustrator using an HTML link instead of a local file.  We are hosting our images in SharePoint and need the design file to retain it's links, no matter

    We are currently looking for a way to link images to a design file within programs like InDesign and Illustrator using an HTML link instead of a local file.  We are hosting our images in SharePoint and need the design file to retain it's links, no matter who on our network opens the design file.

    The Cloud forum is not about using individual programs
    The Cloud forum is about the Cloud as a delivery & install process
    If you will start at the Forums Index https://forums.adobe.com/welcome
    You will be able to select a forum for the specific Adobe product(s) you use
    Click the "down arrow" symbol on the right (where it says All communities) to open the drop down list and scroll

  • Adding a text layer over a sliced PS image

    Having trouble positioning a text layer over a PS sliced
    image.
    The sliced image is positioned relative to the center of the
    page (so it appears in the same place regardless of monitor size or
    resolution, and that's where I want it).
    I can position the layer in Dreamweaver, but when previewed
    in the browser, the test layer moves to the left -- apparently
    being positioned relative to the left side of the screen.
    Is there any way to position a text layer so that it is
    position relative to the center of the page (and therefore reliably
    will appear on top of an image also positioned relative to the
    center of the page)?
    Any suggestions?

    This is a bad approach. Consider what will happen to your
    careful alignment
    if someone resizes their text in their browser. If you must
    place text over
    an image, the best way to do it is to make the image the
    background of some
    container, and then use CSS (margins or padding) to nudge the
    text into the
    desired location location. You will still have the same
    problem, though.
    > I can position the layer in Dreamweaver, but when
    previewed in the
    > browser,
    > the test layer moves to the left -- apparently being
    positioned relative
    > to the
    > left side of the screen.
    That's how absolutely positioned elements work when they are
    not within some
    other positioned element. The zero coordinates default to the
    <body> tag,
    i.e., the upper, left-hand corner of the browser viewport.
    > Is there any way to position a text layer so that it is
    position relative
    > to
    > the center of the page (and therefore reliably will
    appear on top of an
    > image
    > also positioned relative to the center of the page)?
    Certainly, but you will have to understand CSS positioning to
    accomplish it.
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    ==================
    "Phyto-Man" <[email protected]> wrote in
    message
    news:[email protected]...
    > Having trouble positioning a text layer over a PS sliced
    image.
    >
    > The sliced image is positioned relative to the center of
    the page (so it
    > appears in the same place regardless of monitor size or
    resolution, and
    > that's
    > where I want it).
    >
    > I can position the layer in Dreamweaver, but when
    previewed in the
    > browser,
    > the test layer moves to the left -- apparently being
    positioned relative
    > to the
    > left side of the screen.
    >
    > Is there any way to position a text layer so that it is
    position relative
    > to
    > the center of the page (and therefore reliably will
    appear on top of an
    > image
    > also positioned relative to the center of the page)?
    >
    > Any suggestions?
    >

  • Adobe Acrobat. Change "Copy selected text into Highlight, Cross-Out, ..." also for highlights made before changing the setting

    I am looking for a solution to apply the "Copy selected text into Highlight, Cross-Out, and Underline comment pop-ups" setting to highlights that I made before I changed this setting.
    Someone wrote a batch for this which costs 60 dollar and this seems to do what I am looking for: Custom-made Adobe Scripts: Acrobat -- Retroactively Copy Highlighted Text into Comments
    Where can I find Adobe's solution for this problem?  I do not want to buy external batches for a professional software suit.
    I expect that this is a common problem for people who start to organize a large literature base with many pdfs and must keep track of highlighted text. I was not previously aware of the "Copy selected..."setting, but I need to change it now for all my pdf files to make them compatible with a reference manager that I want to use. New comments are now compatible, but the hundreds(!) of pdfs that I worked through before are not, so copy pasting the highlighted text into comments is not an option.

    Hi gb145,
    You are posting on acrobat.com online service forums.
    Kindly post this query in Acrobat forums:Acrobat
    Regards,
    Florence

Maybe you are looking for