Rollover for an image to produce a larger image outside of the div

T

toolmania1

New Member
I have an image that is about 100 px wide by 100 px tall. The div has the same dimensions and is positioned absolutely. Can you use an image that is much larger to produce sort of a pop up effect that would take an image 400 px wide by 400 px tall? This would extend outside the boundaries of the current div. I don't know if that would cause a problem. I will try this later as I am not at my pc at home. But, I was just spit balling ideas.
 
PixelPusher

PixelPusher

Super Moderator
Staff member
Would the larger image replace the small one? or popup in a different location?
Are you trying to use css only? or were you thinking of javascript?
 
T

toolmania1

New Member
The larger image would not replace the smaller one. I was thinking more along the lines that the larger one would be displayed on top of the whole page. The page would not move. This would probably be most comparable to a tool tip when you would hover over something. But, I do not think there would be a delay like with a tool tip. I could do css or javascript, it would not matter to me. I do not know javascript in great detail, but I have used it and am sure I could understand anything you would tell me. I know c++. java, php, etc. Javascript is easier to learn than they were.
 
T

toolmania1

New Member
Actually, now that I am home and look at it, I am going to have to use javascript I think. I am using a Google calendar. I want it to display really big when someone rolls over it. I just tried in Dreamweaver, and DW wants an original image. I do not have an original image since Google lets you copy the code for the calendar in an iFrame and just place it on your web page. I will use that code later. So, I will not be able to create a tradition rollover that Dreamweaver will let me do.
 
T

toolmania1

New Member
The one thing that I would like to have different than how the rollovers work on that site, is that when a new image it put up, that I do not want the image to go back to the same one. I want the image that was just rolled over to stay. I wonder if that would mean that I would put the mouseover and mouseout equal to the same picture? I will try and post results.
 
T

toolmania1

New Member
Ok, so I got it to work, sort of.

When I roll over the first pic, it changes the second pic into the first pic. However, the size is still the same. I want the size to change. Here is what I have so far:

<P align="center">
<A HREF="http://www.yahoo.com/"
onmouseover='anotherImage.src = "./images/index_01.gif"'
onmouseout="">
<IMG SRC="./images/index_01.gif"
NAME="timsImage"
WIDTH=300
HEIGHT=300
BORDER=0>
</A>
If you use this, please give me credit.
</P>
<p>
<A HREF="http://www.yahoo.com/">
<IMG SRC="./images/index_09.jpg"
NAME="anotherImage"
WIDTH=300
HEIGHT=300
BORDER=0>
</A>
</p>
 
PixelPusher

PixelPusher

Super Moderator
Staff member
So when you rollover the small image the larger one appears at the top of the page, right? What happens when you rollout of the small image, does the large one disappear? remain?
 
PixelPusher

PixelPusher

Super Moderator
Staff member
That makes sense. That is the nature of a rollover, it is either on or off. It you want it to ease in and out (smooth) that would take javascript without a doubt.

Here is an example with two images that I thought I had posted yesterday:

Code: 
div#ext a:link img, div#ext a:visited img {
	position:absolute;
	width:500px;
	height:492px;
	top:-500px;
	left:350px;
	border:none;
}
div#ext a:hover img, div#ext a:focus img {
	top:200px;
}
div#ext a:link, div#ext a:visited {
	display:block;
	width:150px;
	height:148px;
	text-indent:-5000px;
	background:url(smallImage.png);
}
div#ext a:hover, div#ext a:focus {
	outline:0;
}

HTML: 
<body>
<div id="ext">
	<a href="">External Rollover Image <img src="largeImage.png" alt="The large image"/></a>
</div>
</body>
 
You must log in or register to reply here.
Top