...

View Full Version : Changing Image Size in a Hover



treeleaf20
10-28-2009, 09:45 PM
Maybe this is an easy question:
I have the following CSS:


.fn-area:hover {
position: absolute;
background-image: url(artwork/image.gif);
border: 1px solid #fff;
}


The area is different sizes however. Is there anyway to make the image in the background adjust to the size of the area when I hover over it?

treeleaf20
10-28-2009, 09:48 PM
A little further clarification, I don't want the image to repeat if the area is bigger then the image and I don't want only part of the image to appear if it's smaller then the image.

Rowsdower!
10-28-2009, 09:49 PM
Background images are not resizeable under current standards so the strict answer to your questions is "no." You could always create an image that has both the small and large sizes in the same image (just like people use in "sprite" menus, basically). Then you can change the background position at the same time as you change the element size so that the large version portion of the sprite image appears when hovered.

Otherwise I think you're going to need javascript.

Excavator
10-28-2009, 09:50 PM
Hello treeleaf20,
Your absolute positioned hover image is removed from the normal flow of the document. Have you tried not positioning it? You would need to specify a size too...

Let's have a look at your test site, it would help to have the images available.

Rowsdower!
10-28-2009, 09:50 PM
In response to your followup, you can (and would need to) specify background-repeat:no-repeat; for the element if you try the sprite suggestion that I made...

treeleaf20
10-28-2009, 09:51 PM
Yeah, they can vary a ton. Not just a big and a small. Any idea how to do this with javascript?

treeleaf20
10-28-2009, 09:55 PM
I wish I could give you access to the test site but it's just on my local machine here as a localhost. I removed the position:absolute as you suggested. That's the issue, I don't know the size. The fn-area is defined as:


echo "<div class=\"fn-area\" id=\"$resultsettag[tag_id]\" style=\"left: ".$resultsettag['height1']."px; top: ".$resultsettag['width1']."px; width:".$resultsettag['height2']."px; height: ".$resultsettag['width2']."px;\" position:relative;\">";


So there can be a couple of these on the page and each one varies.

Rowsdower!
10-28-2009, 09:56 PM
Not off of the top of my head, but why are we dismissing the CSS option so quickly? any given image would only need to have 2 stages, wouldn't it? Image size wouldn't matter as far as the sprite change is concerned.


If your image sprite were laid out like this:


____
| |
| |
|____|____
| |
| |
|_________|



It would be a matter of assigning background-position:top left; for standard and then background-position:bottom right; for hover state. That's pretty light-weight coding. The only hard part is image editing, though I'm sure you could batch that kind of a job.

treeleaf20
10-28-2009, 10:00 PM
I've never heard of an image sprite before. Do you have an example. The one nice thing is that mine will be some sort of rectangle everytime. So I'm not sure if your thing was an example but it will never look like that.

Rowsdower!
10-28-2009, 10:02 PM
I'm about to leave the office for the day so I can't follow up in detail, but a sprite image is used to create the menu described and implemented here:

http://www.cssplay.co.uk/menus/menu5teen.html

That makes a 3-state change with only 1 image. Yours would be even simpler than this.

treeleaf20
10-28-2009, 10:08 PM
This seems like the idea, I don't know if the whole image isn't loading for me or what it is. How do you view how to do this?

Excavator
10-28-2009, 10:10 PM
Could it be your talking about a disjointed rollover?
see -
simple disjointed rollover (http://nopeople.com/CSS/disjointed_rollover/index.html)
complicated disjointed rollover (http://nopeople.com/CSS/disjointed_rollover_photoalbum/index.html)

And one more, this is an example of another CSS rollover - http://nopeople.com/CSS/CSS_rollover/index.html

treeleaf20
10-28-2009, 10:17 PM
Here are the couple divs on the page:


<div class="fn-area" id="69" style="left: 133px; top: 81px; width:97px; height: 230px;"><div class="fn-note" style="position:relative;"><div class="fn-note_id" id="69" style="position:relative;"></div>
<span class="fn-note-content">creep</span> </div>
</div>
<div class="fn-area" id="70" style="left: 386px; top: 143px; width:136px; height: 129px;"><div class="fn-note" style="position:relative;"><div class="fn-note_id" id="70" style="position:relative;"></div>
<span class="fn-note-content">creep</span> </div>
</div>
<div class="fn-area" id="71" style="left: 43px; top: 344px; width:151px; height: 222px;"><div class="fn-note" style="position:relative;"><div class="fn-note_id" id="71" style="position:relative;"></div>


So that shows that they come in different sizes and different places in the page.

Excavator
10-28-2009, 11:42 PM
So your #69 or #70 are the different hovers?
That could be done... I think, as a disjointed rollover.

Be careful though, id is not supposed to be a number and won't validate.

treeleaf20
10-28-2009, 11:49 PM
That's correct. The are different hovers and different sizes. That's why I would basically need the background to get changed for every single rollover.

Rowsdower!
10-29-2009, 01:01 PM
Ohhhhhh. You want to hover over an image thumbnail and have it's full-size version appear in a specific place on the page. I though you wanted to have a link with a background image that would get larger when hovered over.

I was thinking you were trying to do something like this (with the attached image):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Hover Thingy</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">

.enlarging_link {font-weight:bold;text-decoration:none;font-family:Tahoma;font-size:12px;border:1px solid #000;text-align:center;line-height:132px;display:block;height:132px;width:99px;background:transparent url(potatoes_sprite.jpg) no-repeat top left;}
.enlarging_link:hover {font-size:48px;height:532px;width:400px;line-height:532px;background-position:bottom right;}


</style>
</head>
<body>
<div id="wrapper"> <!-- Open Wrapper -->

<a class="enlarging_link" href="#nogo">This is a link.</a>

</div> <!-- Close Wrapper -->
</body>
</html>

We were talking about two entirely different things.

To get what you're after you can use the methods linked to by Excavator or else you can download and set up a javascript Lightbox to handle this for you.

In this case I would probably go for Lightbox but that's just my personal preference.

treeleaf20
10-29-2009, 02:36 PM
Is there anyway I can pass the CSS the dimensions to use for the background image? I don't know if you can append stuff to:

background: url(artwork/creep_stamp3.gif) no-repeat;

Maybe something like:
background: url(artwork/creep_stamp3.gif) no-repeat 30px 45px;

??

Excavator
10-29-2009, 02:56 PM
Is there anyway I can pass the CSS the dimensions to use for the background image? I don't know if you can append stuff to:

background: url(artwork/creep_stamp3.gif) no-repeat;

Maybe something like:
background: url(artwork/creep_stamp3.gif) no-repeat 30px 45px;

??

Yes, that's valid. http://www.w3schools.com/Css/pr_background-position.asp

treeleaf20
10-29-2009, 03:01 PM
Ok, but that seems like position. I was more referring to the size. Someone had mentioned min-height and min-width? if I make my image huge so it would make it smaller, would that be an option and then set min-height and min-width?

Rowsdower!
10-29-2009, 03:13 PM
Refer to my first post in this thread. Background images cannot be resized under current standards. :(

Excavator
10-29-2009, 03:15 PM
Yes that is positioning the background.

Did you look at the links I gave you that show how to do this? http://nopeople.com/CSS/disjointed_rollover/index.html has two rollovers, both are positioned and sized in the CSS.
The CSS that positions the first hovered image on that page is
#bg1:hover span {
width: 800px;
height: 444px;
position: absolute;
top: 0;
left: 0;
display: block;
}

treeleaf20
10-29-2009, 03:29 PM
Maybe I'm an idiot but I tried to do this:
.fn-container-active .fn-area:hover {
background: url(artwork/stamp5.gif);
background-repeat:no-repeat;
width: 100px;
height: 100px;
visibility: inherit;
display:block;
}


I made the image 400x400 but can be smaller or bigger as needed. I would have guessed the image size would have been 100x100 with this CSS but the image size never changed. It's still it's original 400x400 dimension.

Excavator
10-29-2009, 03:57 PM
I don't understand. Earlier you said #69, #70 and #71 were separate hovers but now your putting a hover on the class that applies to all of those id's?

It seems like we are getting nowhere.

Do you have, or can you put up, a demo site? That would be best so we would have access to your images.
As a second option, you could post your entire code and upload your images.

treeleaf20
10-29-2009, 04:17 PM
Ok, here it goes. Here is all the code:


<?php
include ("config.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="fnclientlib/styles/fnclient.css" />
</head>
<body>
<?php
$qrystory = "Select * from pictures where picture_id='4'";
$resultstory = mysql_query($qrystory);
$resultsetstory = mysql_fetch_array($resultstory);
?>
<div id="fn-canvas-id" class="fn-canvas fn-container-active" style="position:relative;">
<?php
$qrygettag = "select * from tags where picture_id='4'";
$resulttag = mysql_query($qrygettag);
$resulttagnum = mysql_num_rows($resulttag);
while($resultsettag = mysql_fetch_array($resulttag)){
echo "<div class=\"fn-area\" id=\"$resultsettag[tag_id]\" style=\"left: ".$resultsettag['height1']."px; top: ".$resultsettag['width1']."px; width:".$resultsettag['height2']."px; height: ".$resultsettag['width2']."px;\" position:relative;\">";
echo "<div class=\"fn-note\" style=\"position:relative;\">";
echo "<div class=\"fn-note_id\" id=\"$resultsettag[tag_id]\" style=\"position:relative;\"></div>";
echo "<span class=\"fn-note-content\">$resultsettag[tagged_user]</span>";
?>
</div>
</div>
<?php
}
?>
<div class="fn-controlbar fn-controlbar-active">
<?php
if($resultsetstory['user_name']==$_SESSION['user_name']){
?>
<a href="#" class="fn-controlbar-add-inactive">Add A Creep Stamp</a>
<?php
}
?>
</div>
<form style="visibility: hidden; opacity: 0;" class="fn-editbar fn-editbar-inactive" name="fn_editbar" id="fn_editbar">

<div class="fn-editbar-fields"> <label> <input hidden="" class="fn-editbar-author" name="author" value="" type="hidden"> </label> <label> <input class="fn-editbar-entry_id" name="entry_ID" value="<?php echo $picture_id; ?>" type="hidden"> </label> </div>

<div class="fn-editbar-fields"><label> Select Creep to Tag: </label>
<select class="fn-editbar-content" name="content">
<?php
$qryfav = "select favorite_user from favorites where user_name='$_SESSION[user_name]'";
$resultfav = mysql_query($qryfav);
while($resultsetfav = mysql_fetch_array($resultfav)){
echo "<option value=\"$resultsetfav[favorite_user]\">$resultsetfav[favorite_user]</option>";
}
?>
</select>
</div>
<div class="fn-editbar-fields">
<span class="fn-editbar-ok"> </span>
<span class="fn-editbar-cancel"> </span>
</div>
</form>
<?php
echo "<img src=\"uploaded_files/1254404861-batman.jpg\" onclick=\"javascript:getpic(this.myform2);\">";
?>
</div> <!-- / fn-canvas-->
</body>
</html>


The CSS is:


/*
The overall canvas: added in fnclient-0.5.0 to provide a canvas works space to be able to place
controls outside of image, and also one of: container-inactive container-active
*/

.fn-canvas {
position: relative;
border: 0px solid #000000;
z-index: 100;
/*background-color: #eef5f9;*/
border-left: 0px solid #000000;
border-top: 0px solid #000000;
border-right: 0px solid #000000;
border-bottom: 0px solid #000000;
}

/*
The overall container: always has class="fn-container", and also one of:
container-inactive container-active
*/

.fn-container {
position: relative;
}

.fn-container img {
border-width: 0;
}

.fn-view-image-link {
display: block;
margin-top: 10px;
text-align: left;
}

#fn-modaldialog {
position: absolute;
background-color: #000000;
height: 20px;
width: 150px;
right: 0px;
top: 0px;
color: black;
padding-left: 4px;
}


/* Note areas - a separate class is applied to those being edited. */

.fn-area {
position: absolute;
/*background: url(artwork/transparent.gif);*/
/*border: 1px solid #222;*/
z-index:50;
}
.fn-area:hover {
position: absolute;
/*background: url(artwork/creep_stamp2.gif);*/
/*background-color:#000000;
border: 5px solid #000;*/
}


#fn-area-new{
border: 1px dotted #000000;
}

.fn-container-active .fn-area {
background: url(artwork/transparent.gif);
visibility: inherit;
}
.fn-container-active .fn-area:hover {
background: url(artwork/creep_stamp4.gif);
background-repeat:no-repeat;
width: 100px;
height: 100px;
visibility: inherit;
display:block;
}


.fn-container-inactive .fn-area {
visibility: hidden;
}

.fn-area-editing {
position: absolute;
visibility: visible;
background: url(artwork/transparent.gif);
border: 5px dashed #000000;
cursor: crosshair;
}


.fn-area-innerborder-left {
position: absolute;
top: 0px;
left: 0px;
border-left:1px solid #fff;
width: 0px;
height: 100%;
}

.fn-area-innerborder-top {
position: absolute;
top: 0px;
left: 0px;
border-top: 1px solid #fff;
width: 100%;
height: 1px;
}

.fn-area-innerborder-right {
position: absolute;
top: 0px;
right: 0px;
border-right:1px solid #fff;
width: 0px;
height: 100%;
}

.fn-area-innerborder-bottom {
position: absolute;
top: 0px;
bottom: 0px;
border-bottom: 1px solid #fff;
width: 100%;
}


/* Notes themselves. */

.fn-note {
position: absolute;
left: 0%;
top: 100%;
visibility: hidden;
padding: 4px;
background-color: #555555;
border: 1px solid #fff;
-moz-border-radius: 7px; /* Non-standard */
z-index:100;
}
.fn-note span {
display: block;
margin-top: 2px;
text-align: left;
line-height: 1em;
}
.fn-note-title {
margin-bottom: 1px;
font-size: 110%;
font-weight: bold;
color: #fff;
}
.fn-note-content {
color: #fff;
}
.fn-note-author {
font-size: 80%;
font-style: italic;
text-align: right;
color: #fff;
}




/* Note drag/resize UI */

.dragresize {
position: absolute;
width: 5px;
height: 5px;
font-size: 1px;
background-color: #555555;
border: 1px solid black;
}

.dragresize-tl {
top: -8px;
left: -8px;
cursor: nw-resize;
background-color: #555555;
}
.dragresize-tm {
top: -8px;
left: 50%;
margin-left: -4px;
cursor: n-resize;
background-color: #555555;
}
.dragresize-tr {
top: -8px;
right: -8px;
cursor: ne-resize;
background-color: #555555;
}

.dragresize-ml {
top: 50%;
margin-top: -4px;
left: -8px;
cursor: w-resize;
background-color: #555555;
}
.dragresize-mr {
top: 50%;
margin-top: -4px;
right: -8px;
cursor: e-resize;
background-color: #555555;
}

.dragresize-bl {
bottom: -8px;
left: -8px;
cursor: sw-resize;
background-color: #555555;
}
.dragresize-bm {
bottom: -8px;
left: 50%;
margin-left: -4px;
cursor: s-resize;
background-color: #555555;
}
.dragresize-br {
bottom: -8px;
right: -8px;
cursor: se-resize;
background-color: #555555;
}




/* Control buttons. */

.fn-controlbar {
position: absolute;
right: 0px;
top: -18px;
height: 20px;
z-index: 50;
}
.fn-controlbar-inactive {
background: transparent;
width:100%;
}
.fn-controlbar-active {
width: 100%;
}

.fn-controlbar span {
position: absolute;
visibility: hidden;
bottom: 2px;
height: 11px;
font-size: 1px;
line-height: 1px;
cursor: pointer;
}
.fn-controlbar-active span {
visibility: inherit;
}

span.fn-controlbar-toggle-inactive {
left: 185px;
top: -5px;
width: 62px;
height: 20px;
background-image: url(artwork/toggle-inactive.gif);
}
span.fn-controlbar-toggle-active {
left: 185px;
top: -4px;
width: 62px;
height: 20px;
background-image: url(artwork/toggle-active.gif);
}

span.fn-controlbar-add-inactive {
left: 0px;
top: -5px;
width: 100px;
height: 25px;
background-image: url(artwork/creep_stamp.htm);
}

span.fn-controlbar-add-active {
left: 0px;
top: -5px;
width: 100px;
height: 25px;
background-image: url(artwork/add-active.gif);
}

span.fn-controlbar-edit-inactive {
left: 60px;
top: -5px;
width: 52px;
height: 20px;
background-image: url(artwork/edit-inactive.gif);
}

span.fn-controlbar-edit-active {
left: 60px;
top: -5px;
width: 52px;
height: 20px;
background-image: url(artwork/edit-active.gif);
}

span.fn-controlbar-del-inactive {
left: 120px;
top: -5px;
width: 62px;
height: 20px;
background-image: url(artwork/del-inactive.gif);
}

span.fn-controlbar-del-active {
left: 121px;
top: -5px;
width: 62px;
height: 20px;
background-image: url(artwork/del-active.gif);
}

span.fn-controlbar-credits {
left: 233px;
top: -1px;
width: 77px;
height: 20px;
background-image: url(artwork/fncredits.gif);
}

span.fn-controlbar-logo {
visibility: visible;
right: 2px;
width: 20px;
background-image: url(artwork/fnlogo.gif);
}


/* Editing UI */


.fn-editbar {
position: absolute;
left: 0px;
z-index: 100;
background-color: #1B1B1B;
padding-left: 5px;
padding-bottom: 5px;
font-size: 12px;
border: 1px solid #fff;
}

.fn-editbar-inactive {
visibility: hidden;
}

.fn-editbar-active {
visibility: inherit;
padding-bottom: 5px;
border: 1px solid #fff;
}

.fn-editbar-fields {
left: 0px;
top: 100%;
z-index: 100;
width: 100%;
padding: 5px 0;
font-size: 12px;
border: 0px solid #fff;
}

.fn-editbar label {
margin-left: 5px;
font-weight: bold;
}
/*
.fn-editbar-fields p {
font-weight: bold;
text-align: left;
}
*/
.fn-editbar input {
font-weight: normal;
width: 90%;
font-family: arial, helvetica, sans-serif;
font-size: 9pt;
font-weight: bold;
cursor: text;
}

.fn-editbar-content {
font-family: arial, helvetica, sans-serif;
font-size: 9pt;
}

.fn-editbar span {
position: absolute;
visibility: visible;
top: 2px;
height: 11px;
font-size: 1px;
line-height: 1px;
}

.fn-editbar-active span {
visibility: inherit;
}

span.fn-editbar-ok {
right: 70px;
width: 28px;
height: 18px;
background-image: url(artwork/ok.gif);
border: 1px solid #fff;
visibility: inherit;
padding:0px;
}

span.fn-editbar-cancel {
right: 6px;
width: 55px;
height: 18px;
background-image: url(artwork/cancel.gif);
border: 1px solid #fff;
visibility: inherit;
}

treeleaf20
10-29-2009, 04:18 PM
The actual HTML output for this is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="fnclientlib/styles/fnclient.css" />
</head>

<body>
<div id="fn-canvas-id" class="fn-canvas fn-container-active" style="position:relative;">
<div class="fn-area" id="64" style="left: 286px; top: 14px; width:114px; height: 306px;" position:relative;"><div class="fn-note" style="position:relative;"><div class="fn-note_id" id="64" style="position:relative;"></div><span class="fn-note-content">testperson</span></div>
</div>
<div class="fn-area" id="63" style="left: 60px; top: 209px; width:106px; height: 98px;" position:relative;"><div class="fn-note" style="position:relative;"><div class="fn-note_id" id="63" style="position:relative;"></div><span class="fn-note-content">creep</span></div>
</div>

<div class="fn-area" id="81" style="left: 103px; top: 6px; width:115px; height: 122px;" position:relative;"><div class="fn-note" style="position:relative;"><div class="fn-note_id" id="81" style="position:relative;"></div><span class="fn-note-content">creep</span></div>
</div>
<div class="fn-controlbar fn-controlbar-active">
</div>
<form style="visibility: hidden; opacity: 0;" class="fn-editbar fn-editbar-inactive" name="fn_editbar" id="fn_editbar">

<div class="fn-editbar-fields"> <label> <input hidden="" class="fn-editbar-author" name="author" value="" type="hidden"> </label> <label> <input class="fn-editbar-entry_id" name="entry_ID" value="" type="hidden"> </label> </div>


<div class="fn-editbar-fields"><label> Select Creep to Tag: </label>
<select class="fn-editbar-content" name="content">
</select>
</div>
<div class="fn-editbar-fields">
<span class="fn-editbar-ok"> </span>
<span class="fn-editbar-cancel"> </span>
</div>
</form>
<img src="uploaded_files/1254404861-batman.jpg" onclick="javascript:getpic(this.myform2);"></div> <!-- / fn-canvas-->
</body>
</html>

Excavator
10-29-2009, 04:36 PM
I guess I still don't understand what you're attempting to do. I see an image that has 3 different hover locations, are you trying to make an image map?

Something like this? http://frankmanno.com/ideas/css-imagemap/ or http://www.cssplay.co.uk/menu/imap.html

treeleaf20
10-29-2009, 04:45 PM
Yes basically create the image map I don't know if I can with how the code is set up. The rainbow one would seem to work because it shows the same coordinates the my div has. I have no idea on how to go about setting this up with the code I already have though. Any help you can provide here would be great. Would doing this even work with my code since mine are in <div> and these are in <dd>??

Excavator
10-29-2009, 04:58 PM
Well, your code is definitely a mess right now. Just run it through the validator and see what I mean.

I'm pretty sure, if Stu Nichols did it using a dl, that is a good way to do it.

treeleaf20
10-29-2009, 06:48 PM
Ok, so I figured I can just create the image map and let everything else be the same. However when I have this code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#cmap {display:block; width:1000px; height:1000px; background:#fff; position:relative; overflow:hidden;}
#red {display:block; width:106px; height:98px; position:absolute; left:60px; top:209px; background:#eee;}
#blue {display:block; width:400px; height:300px; position:absolute; left:103px; top:6px; background:#eee;}

#red:hover {background: url(fnclientlib/styles/artwork/creep_stamp4.gif) no-repeat; color:#fff;}
#blue:hover {background: url(fnclientlib/styles/artwork/creep_stamp4.gif) no-repeat; scolor:#000;}
</style>
</head>
<body>
<dl id="cmap">
<dd><a id="red" title="Red" href="#nogo">Red</a></dd>
<dd><a id="blue" title="Blue" href="#nogo">Blue</a></dd>
</dl>
</body>
</html>


The image size doesn't change when I rollover it. I tried to do this:


#blue:hover {background: url(fnclientlib/styles/artwork/creep_stamp4.gif) no-repeat; width:400px; height:300px; position:absolute; left:103px; top:6px; color:#000;}


It only made the image once. The image size is 100x100 so I intentionally made this one big. Any ideas now?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum