Link to home
Start Free TrialLog in
Avatar of dungelhausen
dungelhausenFlag for United States of America

asked on

Popup of different size from origonal pic.

I have been struggling with making a popup for a weather station website. I need to supply an image for a popup on an established website. I have tried the mouseover in dreamweaver cs4 and I’m still having trouble producing a different size rollover. I am getting stuck with the rollover remaining 8x11 px when the popup should be 400x600 px.

I moved on after this to a css version instead of the javascript. This I am failing with worse with no startup pic to even try rollover.

Learning the correct way would be very useful.

Some of the code:
<div class="cur_date" id="wind_speed">Wind Speed:&nbsp;</div>

<div class="cur_date" id="wind_dir">Wind Direction:

<style type="text/css">
.direction {
      padding:0px;
      margin:0px;
      display: block;
      width:100%;
}
.direction a {
      background-image:url(../../images/question_mark.png);
      width: 10px;
      height:14px;
}
.direction a:hover {
      background-image:url(../../images/compass-with-info.jpg);
      width: 400px;
      height:600px;
}      
</style><div class="direction"><a href="#">
<img src="../../images/question_mark.png" width="8" height="11"/></a>&nbsp;</div>
Avatar of Tom Beck
Tom Beck
Flag of United States of America image

I believe you can achieve what you want by putting the div with the background inside the anchor.
<style type="text/css">
.direction {
      padding:0px;
      margin:0px;
      display: block;
      width:100%;
}
.direction {
      background-image:url(../../images/question_mark.png);
      width: 10px;
      height:14px;	  
}
a:hover .direction {
      background-image:url(../../images/compass-with-info.jpg);
      width: 400px;
      height:600px;
}      
</style>

<div class="cur_date" id="wind_speed">Wind Speed:&nbsp;</div>

<div class="cur_date" id="wind_dir">Wind Direction:

<a href="#">
	<div class="direction"></div>
</a>

Open in new window

Avatar of dungelhausen

ASKER

Hello tommyBoy,

Thank you for the answer. I have rearranged the code to be inside the anchor and the image is not showing for the rollover. I feel this is the same as I was getting before.

I am confident that your change was right up the correct road.

Here it is updated:
<style type="text/css">
.direction {
	padding:0px;
	margin:0px;
	display: block;
	width:100%;
}
.direction a {
	background-image:url(../../images/question_mark.png);
	width: 8px;
	height:11px;
}
.direction a:hover {
	background-image:url(../../images/compass-with-info.jpg);
	width: 400px;
	height:600px;
}	
</style>
<div class="cur_date" id="wind_dir">Wind Direction:

<a href="#">
		<div class="direction"></div>
</a>

&nbsp;</div>

Open in new window


This code is live at:
http://nyglrc.info/oswego-buoy.html
Any thoughts?
ASKER CERTIFIED SOLUTION
Avatar of Tom Beck
Tom Beck
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
tommyBoy,
Is there a way to bring this in over the top of the page instead of adjusting the div sizes as I started this whole thing?
Like a true popup. I went this direction because I thought it was the way to keep the image the correct size and not distorted.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
No.
Thank you so much. I am on this.
This was worked through so perfectly.  tommyBoy's answers were perfectly explained for this newbie.