Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 427
  • Last Modified:

Rollover text causes an image to appear

Hi,

Im trying to see if i can do this effect on a site befoe i go to far into it.

What i want to do is when you rollover a piece of text an image appears somewhere on the page.

If thats possible, trying to see if its possible to do it in a menu, so rollover button menu appear, rollover text in menu image appears. Trying not to use flash :0) (can't use it basically >:0)
0
Sideas
Asked:
Sideas
  • 4
  • 3
1 Solution
 
GrandSchtroumpfCommented:
0
 
SideasAuthor Commented:
That looks pretty much like what i want to do.

A question on that, if the part on the side of that page was in a changing width, i.e. it was always in the centre of the browser, then you could not do that as the images need a set fixed point to be able to do the rollover?
0
 
GrandSchtroumpfCommented:
the link page uses css for the rollover, so that requires a specific html structure (your images need to be children of the elements you hover).  however, if you use javascript, then you can do the same thing with any html structure you want.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
SideasAuthor Commented:
Ah ok.

Sorry to ask another question, i'll post it seperately if you want?

Can i have html text, that has rollover effect pulling in an image elsewhere?

I know i can do a graphic that has a rollover effect and pull in another graphic on the page, didn't know you could use text to do that. Any links you know that do that?

Im off to bed now but wil look back in morning and give you the A for your help. Been great, thanks.
0
 
GrandSchtroumpfCommented:
you need to use the getElementById() method to get a reference to your image:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">

body {
  background-color: #ddd;
  color: black;
}

div {
  background-color: #eee;
  color: black;
  padding: 1em;
  margin: 1em;
}

</style>
</head>
<body>

<div>
<span
onmouseover="getElementById('myimage').src = 'http://www.experts-exchange.com/images/pe/143475.jpg'"
onmouseout="getElementById('myimage').src = 'http://www.experts-exchange.com/images/certification.gif'"
>hove me!</span>
</div>

<div>
<img id="myimage" src="http://www.experts-exchange.com/images/certification.gif">
</div>

</body>
</html>
0
 
SideasAuthor Commented:
Cool, i can see why your up in the top 10 :0)

Thanks alot.
0
 
GrandSchtroumpfCommented:
you are welcome
<:°)
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now