Skip navigation
Currently Being Moderated

How do I make text swap an image on hover?

Oct 29, 2012 8:38 AM

I want to hover over some text, and have an image pop up. Is there a way to do this? Thanks.

 

Randall.

 
Replies
  • Currently Being Moderated
    Oct 29, 2012 8:59 AM   in reply to morphious1964

    There are quite a few ways to do this with javascript or css.

     

    One built-in-to-DW way you can do this with is to use Swap Image Behaviors on your text.

     

    First, make sure your image that you want to swap has an ID in the Properties tab.

     

    Next, highlight your text and give it a link of # in the Properties tab (this makes a null link)

     

    Then click the + in the Behavior tab.

     

    Choose Swap Image

     

    Choose the ID of the image to swap from the list

     

    Browse to the image you want it to change to.

     

    Hit OK.

     

    That "should" do it for you.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 29, 2012 9:02 AM   in reply to morphious1964

    Sure, but it requires a bit of effort on your part.  Where do you want the image to appear?  How large is the image?

     

    The simplest way would be to hand code it like this -

     

    <p>This is some text - hover <a href="#">here</a><span id="image1"><img src="path/to/image"></span></p>

     

    Then use some CSS like this -

     

    p { position:relative; }

    p a + span#image1 { display:none; position:absolute; left:hhhpx; top:vvvpx; }

    p a:hover + span#image1 { display:block; }

     

    In this case, hhh is the horizontal displacement from the start of the paragraph, and vvv is the vertical displacement from the start of the paragraph for the displayed image.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 29, 2012 10:59 AM   in reply to morphious1964
     
    |
    Mark as:
  • Currently Being Moderated
    Oct 29, 2012 11:04 AM   in reply to morphious1964

    That doesn't make much sense (if Adobe removed the ability to fire an Image Swap from text in DW CS6).

     

    Did you have the before image to be swapped inserted into the page first?

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 29, 2012 11:16 AM   in reply to morphious1964

    Ah, that's why. You NEED to have an image to swap from for an Image Swap as your title reads.

     

    What you're looking for is more of a tooltip. Something that brings up an image next to the cursor when the mouse moves over link on your site.

     

    This may be of use to you...

     

    http://craigsworks.com/projects/qtip/demos/content/images

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 29, 2012 11:42 AM   in reply to morphious1964

    morphious1964 wrote:

     

    I need something that is simple, easy to use, and does not require coding. Anything like that out there?

     

    That script I pointed you to has 2 of 3, but "does not require coding" not that I've ever seen, no. There may be some kind of DW Extension that allows for that within the DW interface, however I wouldn't know where to point you.

     

    A basic knowledge of the ins and outs of HTML, css and Javascript is really necessary when working with programs like DW, especially when you run into something that's not covered by the base interface of the program. The link I gave you is actually a very easy to install script, but requires some basic knowledge of html structure and how .js files interact with the .html page.

     

    I recommend doing some online tutorials, the basics are available in a lot of places, I like http://www.w3schools.com for the simple stuff. http://www.lynda.com has very nice video tutorials and goes from basics to some advanced ideas as well.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 29, 2012 12:21 PM   in reply to morphious1964

    Did you try my simple solution?  It works.

     

    And by the way, everything requires coding....

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 29, 2012 12:31 PM   in reply to morphious1964

    CSS Disjointed Rollovers are actually very simple and they do not require any complicated scripts.

    As Murray already said, put your images into <span> tags.  Use CSS to position & hide images until the links are hovered.  See link below for a working demo with HTML & CSS code.

     

    JS Fiddle

    http://jsfiddle.net/G4xXm/17/

     

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 29, 2012 1:00 PM   in reply to morphious1964

    HTML = content

    CSS = styles

     

    Copy & paste the CSS code into your external style sheet if you have one.  Or paste it between the <style> tags within the <head> of your HTML document.

     

    Required knowledge:

    HTML & CSS Fundamentals - http://w3schools.com/

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 30, 2013 4:05 AM   in reply to Nancy O.

    Jon, your answer was the one I needed when I searched today. I know this is an old thread but Iwanted to offer my thanks.

     

    Sharon

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points