I want to hover over some text, and have an image pop up. Is there a way to do this? Thanks.
Randall.
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.
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.
See CSS Disjointed Rollovers or Tooltips (view source to see the code)
Nancy O.
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.
Anyone else have a simple solution? I just need the simple code to copy and paste. I will put in the img reference. I just need the first line, then I can copy and replace and rerplace the img reference in each line. Either that or make a tiny invisible image to do an image swap in DW. Don't reallt like that idea.
Randall.
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
Nancy O.
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.
North America
Europe, Middle East and Africa
Asia Pacific