Text of swap as image with behaviours

Hi a..,.

I am creating an interactive section of my site where a visitor can click on the small and get a larger image and to appear in a larger div (I can get this works very well with the 'swap image' behavior so there is no problem), but on the same onClick event I want a text to appear in another div with respect to the image. I can get this to work once (by using the behavior ' set text > text value contianer "), but when I click on a thumbnail to view the next image/text, the new text is added ontop of the old text and psuhes down. I really want the old text of ve is completely removed and the new text will appear. I know that it will work as an onMouseover/onMouseout effect easily, but I really feel like it works like an onClick event.

I'm really bad with javascript. I tried this line of code in the onClick event starts, he has allowed the text very well, but Wouln't allow any text more to put in the div;

document.getElementByID('textcontainer').innerHTML =' ';

As I said, I'm really bad with javascript. I have enough well can't write code myself, although in a certain extent, I can change the code that is already written based on my needs.

Can someone offer me some help to do this job?

Thanks heaps

Peter

A jQuery toggle could be used to display the content and pictures.  The following example uses buttons, but you might well use thumbnails instead.

http://jsfiddle.NET/NancyO/AP9Hm/

PS. I never use the built-in behaviors of DW.

Nancy O.

Tags: Dreamweaver

Similar Questions

  • using text to swap an image (disjoint overview)

    Hello

    I have a text on my page, which is also a link.

    It has a background color, which changes when my mouse passes over it.

    I also want an image on the page to swap with another image when my mouse over the text.

    Please can someone direct me to a site that explains how to create a disjointed rollover using text instead of an image.

    Thanks in advance

    On this page, you have several instances of code like this-

    Fuel:

               

    Just replace in this.

    and add this to your CSS-

    label of TD {text-align: right ;}}

    Then you must ensure that the values in your

    Then your page validates.

    Personally, I don't think it's worth the effort to migrate away from your leaking implementation.  And as far as I know, no one in this thread has recommended either you do that, or given you a suggestion as to how.  Achieve this with CSS only would require a good amount of changes to your code, so that each an item in your menu also contained a tag style display: block and was sized and positioned at the location where the image exchanged is now. Then, you must create an image SPRITE containing all your images in Exchange stacked vertically in a single graph that would be awarded as background image for the tag.  Then you would add the CSS necessary to swap the position of the background in the tag image to one that shows the right image to the overview.  It's too tedious for this effect, honestly...

  • BlackBerry 5 - image with text and the background transparent resizing

    Hey,.

    My application consists of a series of images stacked on each other. Some are transparent, some are not. I use images high resolution and resize them based on the width of the screen of the blackberry that runs the application.

    I'm having some trouble resizing of images with text on a transparent background. The resulting image is not of all anti-aliasing. This is the code I use to do:

    function scaleBitmap(Bitmap bmp){
    
    int rgb[] = new int[imageWidth * imageHeight];
    bmp.getARGB(rgb, 0, imageWidth, 0, 0, imageWidth, imageHeight);
    int rgb2[] = rescaleArray(rgb, imageWidth, imageHeight, width, height);
    scaledBmp.setARGB(rgb2, 0, width, 0, 0, width, height);
    
    return scaledBmp;
    }
    

    And here are the results from a group of images resized in photoshop:

    Is it possible that I could improve my resize code to give better results?

    Thanks in advance!

    I found a solution and it is on these forums all the time!

    http://supportforums.BlackBerry.com/T5/Java-development/solution-for-properly-resizing-transparent-b...

  • can anyone provide a link to insert the image with the text on the button in the apex 4.2.6

    can anyone provide a link to insert the image with the text on the button in the apex 4.2.6

    ReemaPuri wrote:

    in the workspace image:-resign.jpeg

    As a button? Seriously?

    Ok. First of all, because the image already contains text, there no point in including the same wording in the form of text on the button. Accessibility requirements can be met using re-sign as alternative text. 4.2, create an image button:

    Tag/Alt text: Re-sign

    Static ID: re - sign

    Style button: Image

    Button Image: & WORKSPACE_IMAGES.resign.jpeg

    To make the image looks more like a button, add the following CSS to Inline CSS property page:

    #re-sign img {
      margin: 0 2px 2px 0;
      border: 2px outset;
      border-radius: 4px;
    }
    #re-sign img:active {
      margin: 2px 0 0 2px;
      border: 2px inset;
      border-radius: 4px;
    }
    

    Finally, there is a bug in 4.2 that generates the incorrect URL for the button images, which requires dynamic action of Page Load to fix.

    Event: Loading the page

    Action: Run the JavaScript Code

    Code

    var resignImg = $("#re-sign img");
    resignImg.attr("src", resignImg.attr("src").replace("/i/", ""));
    
  • Hello! I am a beginner Photoshop - how I 'color above' text on a jpeg image - then match the color background - then retype the new text above? If someone can give me really basic step by step intstructions - I would be happy!  With our thanks!

    Hello! I am a beginner Photoshop - how I 'color above' text on a jpeg image - then match the color background - then retype the new text above? If someone can give me really basic step by step intstructions - I would be happy!  With our thanks!

    Hi Donnas,.

    Content-aware fill is your best friend in this case.

    Just make a selection around the word and go to edit-> Fill-> Content-Aware.

    This usually done a very good job.

    Then you can either return to it several times (maybe in smaller sections) with Content-Aware fill to clean it, or you can play with the Spot Healing Brush tool (J) or the tool clone stamp (s).

    Please see the following link for more information 3 ways to delete the text to a picture in Photoshop - wikiHow

    http://www.WikiHow.com/add-text-in-Photoshop

    Let us know if it helps.

    Concerning

    Sarika

  • How to create a cursor image with text in motion.

    I tried to create a cursor image with text that slides with images. I use the jquery.cycle2 slider plugin that works very well for a slider I have on a different cursor on the same page. I'm not sure why it does not work. If someone could help me that would be great. The code is below:

    HTML:

    < div class = 'fluid wmud' id = 'wmud_img' data-cycle-fx = 'scrollLeft '.

    data-cycle-pause-on-hover = "true".

    data-cycle-speed '4000' = >

    < div class = "fluid wmud_img" >

    "< img src ="... /morris_construction/images/slider4.png"/ >

    < div class = "fluid wmud_text" >

    < h3 > Pro Active: < / h3 >

    < p > we have highly qualified staff and a thorough knowledge of the industry is thus able to add value by providing solutions to customers proactively; often even before that questions arise.                We are also very receptive to requests from the client and provide quick turnaround times, often to meet extremely tight deadlines. < /p >

    < / div >

    < / div >

    < div class = "fluid wmud_img" >

    "< img src ="... /morris_construction/images/slider5.png"/ >

    < div class = "fluid wmud_text" >

    < h3 > Pro Active: < / h3 >

    < p > we have highly qualified staff and a thorough knowledge of the industry is thus able to add value by providing solutions to customers proactively; often even before that questions arise.                We are also very receptive to requests from the client and provide quick turnaround times, often to meet extremely tight deadlines. < /p >

    < / div >

    < / div >

    < div class = "fluid wmud_img" >

    "< img src ="... /morris_construction/images/slider6.png"/ >

    < div class = "fluid wmud_text" >

    < h3 > Pro Active: < / h3 >

    < p > we have highly qualified staff and a thorough knowledge of the industry is thus able to add value by providing solutions to customers proactively; often even before that questions arise.                We are also very receptive to requests from the client and provide quick turnaround times, often to meet extremely tight deadlines. < /p >

    < / div >

    < / div >

    < / div > <!--end of wmud-->

    JavaScript:

    " < script src =" http://malsup.github.com/jQuery.cycle2.js "> < / script > .

    < script type = "text/javascript" >

    {$(function()}

    $('#wmud_img').cycle ({}

    FX: 'scrollLeft ',.

    });

    });

    < /script >

    Try these demos:

    Cycle2 overlays

    Cycle2 Caption2 Plugin

    Nancy O.

  • Issue of scrolling image with text wrap.

    When you group multiple images with a single column of text in a scrolling text block, the functionality of text wrapping (was applied also to all the picture frames) only works for the first image. For all of the following images, the text wrapping is ignored. Ideas for a solution?

    Anchor online images for the text to wrap to work, is not not ideal.

    but there are enough options to make it work. That it was always a little weird

    never considered a bug, been around for centuries.

  • How to do an image have several clickable camp arrives with a box next to the image with a text. as I click on a bone in an image a box comes up next to the image with which are the OS.

    How to do an image have several clickable camp arrives with a box next to the image with a text. as I click on a bone in an image a box comes up next to the image with which are the OS. I have cs6

    This article has very clear steps & description of what you're trying to accomplish:

    http://Demosthenes.info/blog/537/enhancing-Imagemaps-with-CSS3-popups#wheelset

  • Text Wrap, image with white background

    CS4 Mac Tiger - when using Quark, I am able to import an image (see image of Zebra head) with a white background (effectively a cut without a route clipping) and tell Quark to the text "wrapping" of the image regardless of the white background. In InDesign, seems to only be able to do if I actually change the shape of the box to resemble the image of the picture. Am I missing something, or this function does not exist in InDesign

    PS. bear in mind I do not always come the image and the design of magazines too Photoshopping does not allow date limit.Picture 1.png

    ID has some pretty sophisticated packaging options. Go to object > Clipping Path > Options... If you do not have a channel alpha in the image file, or a clipping path, choose edge detection and play with the sliders. A string created in Photoshop, where it is relatively easy to isolate the background will work best, however, 99% of the time, or by removing the background entirely if it is an option.

  • Align the image with the text (or vice versa)

    OK, maybe I just stop thinking when I get desperate, but could you pls tell me how I align horizontally a round (circular) image with a single line of text, inside my footer, something like: "0 -"? I tried the box, the type, the Center option, I tried to give the image, a class style, but it is only float lleft, right or none, etc, etc... I'm sure that there is an easy way to do it, but I can't find it!

    Sorry about that

    JV

    Try to assign a line-height: value; that is greater than the O on the line [footer] container? (you can also display: block;)

    Beth

  • images with text

    Hello

    I create a quiz in flash for the multiple choice questions. Questions are stored in an xml file. I display the question and options in the dynamic text boxes. Everything works well so far.

    My problem is that some questions have pictures with them. How can I display these images with questions?

    Thank you

    your xml file must contain the location/name of the image (if there is an image) and space (say "null") if there is no image. then use loadMovie() to load your image into a target clip.

  • To create a ToolTip text for the image with multiple image map links

    Hello

    RH6 using, that I imported a picture into a topic. For the images that I have created several maps image to post a link to other topics. However, I can't create a map image additional to that same image that includes only the screen Tip text. I get a message of invalid value: "Please select a file, bookmark or topic to bind the hyperlink to.»

    Is there a way to create a popup only the text of an image with multiple image map links? My final output will be to WebHelp but possibly migrate FlashHelp in the near future.

    Thank you

    FMnRH



    Thank you
    FMnRH

    If the image is at the beginning of the subject, or all alone in a reference topic, you can put "#" (without the quotes) as the link for each area reactive.

    If the image is larger than the viewing window, it can jump to the top, but only if the user clicks on the link.

    I tried wz_tooltips and like it. I agree with Leon, it will take time for the first image but maybe go faster later.

    Harvey

  • Include the anchor and image with apex_item.text

    I wonder if it is possible to include an anchor and an image with the apex_item.text function. I tried to use the p_attributes parameter in the function, adding an anchor tag and tag the image. When I discovered the page, I can see the image and the link goes to the page I want, however, to the right of the image I see not what turns out to be my p_item_id parameter. In my case it appear on the page as a id = "f1_1" / > just to the right of the image.
    SELECT apex_item.text(1, ID, 15, 15,
               '<a href="f?p=&APP_ID.:23:&SESSION.::::P23_ID:#ID#" >
                 <img src="#IMAGE_PREFIX#e2.gif" border="0" ></a>',
               'f1_' || ROWNUM, null) ID,
    In addition, the #ID # point the value of the href above URL (f? p = & APP_ID.:23: & SESSION.: P23_ID: #ID #) does not pass the value of the element, rather it passes #ID # as value, any thoughts on how to pass the value of the line in a table would be greatly appreciated.

    Our version of the ApEx is 3.2.1.00.10

    Concerning
    Mark

    Published by: bohnensm on July 12, 2010 12:04

    Published by: bohnensm on July 12, 2010 12:05

    Mark,

    apex_item. Text renders a text field, you try to include your own HTML (image + anchor) code as an attribute of this text field. This will generate incorrect HTML code. Instead you can concatenate the string generated for the text with your HTML code field, i.e. move it out of the text field:

    SELECT Apex_item.text (1, ID, 15, 15, null, 'f1_' |) ROWNUM, null).
    '',
    « f1_ » || ROWNUM ID, null)...

    Kind regards
    Marc

  • Replace a pic with another pic / replace one image with another

    Hello

    I created a symbol with a photo and text. I duplicate my symbol and now I'll like to replace my pic duplicated using a new peak. Perhaps, it's simple, but I can't find the way :-(

    Hello

    I created a symbol with an image and text. Symbol of my I duplicated, and now I'd like to replace the image of my new symbol by another. Maybe it's simple, but I have not found how to do :-(

    If you want 2 symbols with different images, you need to duplicate the symbol in the library and then swap the image on them.

    or you can change the image in the code with attr or css.

  • swap Print image?

    I have the print.css works quite well with the help of one of the members. Now, I want to talk about one of the images. His address block which is a graph. For more readability, I want to share this image on printing with just contact info back into plain text white. Is anyway to do this? I was not trying to find a method swap/replace for awhile now...

    There is no such thing. The best way would be to have both the
    page, with a well off the screen to the left. Use the print stylesheet to move
    the only one off the screen on and the one with the screen turned off.

    --
    Murray - ICQ 71997575
    Adobe Community Expert
    (If you * MUST * write me, don't don't LAUGH when you do!)
    ==================
    http://www.dreamweavermx-templates.com - template Triage!
    http://www.projectseven.com/go - DW FAQs, tutorials & resources
    http://www.dwfaq.com - DW FAQs, tutorials & resources
    http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
    ==================

    "phrarod" wrote in message
    News:etv050$S27$1@forums. Macromedia.com...
    > I have the print.css works quite well with the help of one of the members.
    > Now
    > I want to trade on one of the images. His address block which is a
    > chart.
    > I want to swap this image on printing with contact information for readability
    > just
    > back in white plain text. Is anyway to do this? I've been
    > evil
    > trying to find a method swap/replace for awhile now...
    >

Maybe you are looking for

  • When I put google (or any other Word) in my search boxes, they automatically open ebay. Why?

    I have firefox for 1 year, and, until a few weeks ago, I was very happy with it. All of a sudden, when I open this browser, ebay appears in the search box on the right. No matter what I ask google to search for, it looks for the term of ebay. I get t

  • Re: Toshiba 40RL838G - No DLNA - firmware need

    Hello I have a Toshiba 40RL838G TV.DLNA function does not work... I heard that a firmware update may fix this problem.I often try to check firmware menu tv, but never again found on air. I hope you can help me! Thank you!Andrea

  • TOSHIBA 32AV933G loses control of channel list

    Hi, I bought this TV 3 months ago and I have a problem with SORTING CHANNEL function. After reorganization channel as a result of my personal list (I use the same order with all my TV) the av933g has lost the order without apparent reason, forcing me

  • PX1393E drive external HARD not visible in windows Explorer

    Hello world I just bought an external DRIVE for my Toshiba laptop no disc PX1393E. I know that its old and he still has windows 2000 SP4 on it. Now my problem is that my laptop does not recognize the external HARD drive. The Add New Hardware Wizard w

  • eMachines EL1300

    I have an emachines Acer EL1300 PC. I was surprised to find when I finally looked in the help and support that the information has been labeled as HP. Can anyone explain it please? In addition, can I upgrade to Windows 7 on this computer?