Please login or register.

Login with username, password and session length
Advanced search  
Pages: 1 [2] 3 4

Author Topic: Need Help with mouseover & png images - pls help  (Read 18428 times)

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Need Help with mouseover & png images - pls help
« Reply #15 on: July 17, 2006, 04:12:55 pm »

No problem 4Sandrix ;D
glad if it helped.
Logged

4Sandrix

  • Hero Member
  • *****
  • Karma: -13
  • Posts: 597
    • http://fedrick.deviantart.com
Need Help with mouseover & png images - pls help
« Reply #16 on: July 17, 2006, 10:30:51 pm »

Quote from: agentsmith
glad if it helped.
thanks for that too :)
Logged
I'm kind of like Han Solo always strokin' my own Wookiee
I'm the root of all that's evil yeah but you can call me Cookie

Jason Kingery

  • Sr. Member
  • ****
  • Karma: 1
  • Posts: 298
    • http://denial-design.com
Need Help with mouseover & png images - pls help
« Reply #17 on: July 18, 2006, 04:02:45 am »

I was thinking about this, it would work on firfox browser if when you save your mouseover .png set the opacity to like 20%, but it wouldn't work with ie...

mejobloggs

  • Full Member
  • ***
  • Karma: 0
  • Posts: 125
Need Help with mouseover & png images - pls help
« Reply #18 on: July 18, 2006, 06:41:58 am »

Only tested in IE, cause I don't have any other browser available atm.

Not quite sure if it was what you are looking for, but here are some details.

At the start, i thought you where making it for rollovers on an image gallery? Not sure if that is the case, but since that is what I though, its all aimed toward that.

Therefore, the images are done through html <img>, so that you could generate the images from a db or something using php.

Words can also be set to appear on the watermark if you want them. Small description maybe? If you don't want the works, just delete them from the html.

This code here assumes you have a 100px by 100px image. The watermark does not have to be 100 by 100, but however big you want it.

Set the watermark span as the same size as the image and the <a> so that it fills it all up. The watermark image is a centered background, so then no matter what the size of your watermark, it will be sweet. You could also make the watermark appear top left or whatever you want.

HTML
Code: [Select]
<div id="watermark-group">
<a href="#"><img src="image.gif" width="100" height="100" alt=""><span>Hello</span></a>
</div>
CSS
Code: [Select]
body {
margin: 1em;
padding: 0;
}

a img {
border: 0;

}

#watermark-group a {
display: block;
width: 100px;
height: 100px;
position: relative;
}

#watermark-group a span {
color: white;
text-decoration: none;
display: none;
width: 100px;
height: 100px;
background: transparent url(watermark.gif) no-repeat center center;
}

#watermark-group a:hover {background: transparent;}

#watermark-group a:hover span {
display: block;
   position: absolute;
   top: 0;
   left: 0;
}

* html #watermark-group a:hover span { cursor: hand; } /* makes the hand appear on rollover with <IE7 */
« Last Edit: February 18, 2008, 08:48:34 pm by Keyrocks »
Logged

mejobloggs

  • Full Member
  • ***
  • Karma: 0
  • Posts: 125
Logged

4Sandrix

  • Hero Member
  • *****
  • Karma: -13
  • Posts: 597
    • http://fedrick.deviantart.com
Need Help with mouseover & png images - pls help
« Reply #20 on: July 18, 2006, 12:01:55 pm »

Really cool. great job :P It's very confortable :)
But your watermak.gif is very strange, a have made my gif and its not transparent :(
Logged
I'm kind of like Han Solo always strokin' my own Wookiee
I'm the root of all that's evil yeah but you can call me Cookie

mejobloggs

  • Full Member
  • ***
  • Karma: 0
  • Posts: 125
Need Help with mouseover & png images - pls help
« Reply #21 on: July 18, 2006, 12:59:44 pm »

Oh, it can be gif or png, whichever you prefer.

Just make your shape, on a transparent background, then fill it with a checkered pattern, so that every second square is transparent. That way the background will show through.

You have to do this because IE only supports 1 type of transparancy (100% transparent).

PNG supports multiple transparencies, and you can do cool stuff in FF/Opera with png's, but... IE.

I guess what you could do is use conditional comments to serve up a proper transparent png as the watermark, and then for any IE below IE7, use the gif instead.

I guess I can add that to the demo for you... Not sure when I can find the time though.

Oh, and I just noticed that it doesn't seem to preload the watermark? I guess I need to add that as well.
Logged

4Sandrix

  • Hero Member
  • *****
  • Karma: -13
  • Posts: 597
    • http://fedrick.deviantart.com
Need Help with mouseover & png images - pls help
« Reply #22 on: July 18, 2006, 02:48:07 pm »

WoW you're saint mejobloggs  :P Thank so much, it will be great :)
Note: I'm using PNG watermark and its working fine in my IE 7.
LInk:
http://tetanus.caucasus.net/Water
Logged
I'm kind of like Han Solo always strokin' my own Wookiee
I'm the root of all that's evil yeah but you can call me Cookie

mejobloggs

  • Full Member
  • ***
  • Karma: 0
  • Posts: 125
Need Help with mouseover & png images - pls help
« Reply #23 on: July 18, 2006, 11:01:08 pm »

Yeah, it will work fine in IE7, because that has proper png support. IE6 and 5 don't though.

Anyway, I have updated it with IE5/6 support, and added preloading.

http://www.icebytes.org/watermark_rollover/new.html

It looks a bit rough, but i'm sure you can make it look good.
Logged

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Need Help with mouseover & png images - pls help
« Reply #24 on: July 18, 2006, 11:34:09 pm »

That's neat, mejo. Pity about the empty s though -- it would be better to be able to do without them. (imho). Works nicely though.
Logged

mejobloggs

  • Full Member
  • ***
  • Karma: 0
  • Posts: 125
Need Help with mouseover & png images - pls help
« Reply #25 on: July 19, 2006, 12:10:10 am »

Ach, nothing wrong with an empty span. It's just the same as wrapping the link in a div or however you might do it.

You could always put a word inside the span. Then it's not empty ;)
Logged

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Need Help with mouseover & png images - pls help
« Reply #26 on: July 19, 2006, 03:02:48 am »

*coughs*
;D
Logged

4Sandrix

  • Hero Member
  • *****
  • Karma: -13
  • Posts: 597
    • http://fedrick.deviantart.com
Need Help with mouseover & png images - pls help
« Reply #27 on: July 19, 2006, 01:20:20 pm »

outstanding!

Another NOte: I've tested PNG watermark on Windows Xp/ Service Pack 2/ Internet Explorer 6
and it works fine too :P  That's great right? :D
Logged
I'm kind of like Han Solo always strokin' my own Wookiee
I'm the root of all that's evil yeah but you can call me Cookie

4Sandrix

  • Hero Member
  • *****
  • Karma: -13
  • Posts: 597
    • http://fedrick.deviantart.com
Need Help with mouseover & png images - pls help
« Reply #28 on: July 19, 2006, 04:23:59 pm »

Ookey problem when moving style to css file. It stops working... I fill myself so stupid
Logged
I'm kind of like Han Solo always strokin' my own Wookiee
I'm the root of all that's evil yeah but you can call me Cookie

Patric Ahlqvist

  • Nobodys perfect, but Im pretty effing close
  • ULTIMATE member
  • ******
  • Karma: 65
  • Posts: 4867
  • I'm a self-made man and worships my creator.
    • p-ahlqvist.com
Need Help with mouseover & png images - pls help
« Reply #29 on: July 19, 2006, 04:45:10 pm »

4sandrix, You've done everything right so far, but... You've forgotten to make the URL's to the images right... You need to tell the cssfile where to find them, so if your style.css is located in files and your index.php one level up, I guess the images is located in the images folder, right ? THen the css would be like:
Quote
body {
   margin: 1em;
   padding: 0;
   background: #4E4E4E;
}

a img {
border: 0;

}

#watermark-group a {
   display: block;
   width: 100px;
   height: 100px;
   position: relative;
   border: 3px solid #F0F0E5;
}

#watermark-group a span {
   color: white;
   text-decoration: none;
   display: none;
   width: 100px;
   height: 100px;
   background: transparent url(../images/water.png) no-repeat center center;
}

#watermark-group a:hover {background: transparent;}

#watermark-group a:hover span {
   display: block;
      position: absolute;
      top: 0;
      left: 0;
}

#watermark-group a:hover span { cursor: hand; } /* makes the hand appear on rollover with
or "../files/water.png" if the images is in the files folder...the key here is the ../ to let the browser know that you wanna go up one level to find the files folder, and look for the image in there...

And you could also make it a fill URL:
Code: [Select]
background: transparent url(http://yourURL.com/files/water.png) no-repeat center center;Patric.
Logged
"It's only dead fish that goes with the flow... "
Updated
Pages: 1 [2] 3 4