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 18427 times)

4Sandrix

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

Hi every one, my problem is:
I want to watermark image on mouseover, with  png image(semi transparent gradient) and remove it on mouse. I've tryed everything but with no result :( help pls
Here is sample:

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

brauck

  • Hero Member
  • *****
  • Karma: 18
  • Posts: 556
    • http://www.hbw-webdesign.nl/
Need Help with mouseover & png images - pls help
« Reply #1 on: July 16, 2006, 02:12:49 pm »

I am not sure what you mean 4Sandrix; are you using css for the rollover or javascript? and in what browser did you tested it. Can you be a bit more specific?
Logged
Confidence is reduced complexity.
brauck.nl for free css templates

4Sandrix

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

I don't use anything. I can't use javascript rollover to place one image on another.  I need an exaple of Script that can do that thing. I need to place an alphablending PNG image on another image(like it's shown on second image), when mouse is over the second one.
I NEED TO PLACE PNG IMAGE ON THE IMAGE WITH GIRL ON MOUSE OVER. Point is that I want to watermark image while mouse is over it :) Any Ideas? :/
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 #3 on: July 16, 2006, 03:07:28 pm »

Please? :/
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

Mika

  • Hero Member
  • *****
  • Karma: 9
  • Posts: 1377
    • http://www.ni5ni6.com/
Need Help with mouseover & png images - pls help
« Reply #4 on: July 16, 2006, 03:19:00 pm »

Logged
http://www.ni5ni6.com/ - Tutorials, Mods and How-To's about sNews CMS
sNews 1.6 Developers Edition - commented sNews 1.6 version

4Sandrix

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

Thanks Mika for LInk, there are many image roll over exaples, but all of them ar doing this:
 Image #1 disappears and then image #2 shows up.
I need this:
1. image #1 does not disappear
2. image #2 shows up On Mouse Over

I'm a begginer in javascript so sorry if wrote something 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

Mika

  • Hero Member
  • *****
  • Karma: 9
  • Posts: 1377
    • http://www.ni5ni6.com/
Need Help with mouseover & png images - pls help
« Reply #6 on: July 16, 2006, 03:41:05 pm »

just thinking out loud:

create two containers
Quote
<div id="outer">
   <div id="inner">
   </div>
</div>
put your image inside inner container
Quote
<div id="outer">
   <div id="inner">
      <img src="your-image.png" />
   </div>
</div>
create a link
Quote
<div id="outer">
   <a href="#">
      <div id="inner">
         <img src="your-image.png" />
      </div>
   </a>
</div>
create some css
Quote
/*dimensions are just for an example, use your own but all of the elements must have the same size*/
#outer, #inner, #inner img {width: 100px; height: 100px; margin: 0px; padding: 0px; border: 0px none;}
#outer a:link, #outer a:visited {background-image: none;}
#outer a:hover {background-image: url('your-watermark_image.png');}
#outer a:active {background-image: none;}
note: this is just an idea and hasn't been tested

edit: fixed typo in css
« Last Edit: February 18, 2008, 08:46:58 pm by Keyrocks »
Logged
http://www.ni5ni6.com/ - Tutorials, Mods and How-To's about sNews CMS
sNews 1.6 Developers Edition - commented sNews 1.6 version

4Sandrix

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

Thanks Mika I'll try it now :)
Interesting idea :)
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 #8 on: July 16, 2006, 04:19:37 pm »

It did not work, watermark don't shows up.. I added z-index but it didn't help.
its here:
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

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 #9 on: July 16, 2006, 07:44:37 pm »

What browser are you using to view your hover effects ??

Patric.
Logged
"It's only dead fish that goes with the flow... "
Updated

4Sandrix

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

Internet Explorer 7(I know that IE7-css is bugy) & opera 9(opera works fine)
HELP HELP
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

Fred K

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

Try this:
(X)HTML first
Quote
<div id="photos">
<a href="#"><img class="girlpix" src="whatever/clear.gif" alt="" /></a>
<a href="#"><img class="girlpix" src="whatever/clear.gif" alt="" /></a>
<a href="#"><img class="girlpix" src="whatever/clear.gif" alt="" /></a>
</div>
Then the spice:
Quote
CSS
div#photos { display: inline; }
.girlpix, .girlpix a { width: image-width-in-pixels; height: image-height-in-pixels; background: url(whatever/original.jpg) no-repeat; }
.girlpix a:hover { width: image-width-in-pixels; height: image-height-in-pixels; background: url(whatever/original-with-watermark.jpg) no-repeat; }
This isn't exactly what you asked for, since it requires you to make two versions of each image -- one without watermark and one with watermark -- and that can be tedious. Plus you'll need a 1x1 px clear gif to put in the HTML source. But it's lightweight and works in just about every browser I've tried. I think you'll have to use a show/hide thing with javascript to get it working properly (don't have one laying about, sorry, I try to do without for rollovers and such.)

Mika, your idea is almost the same as the above. Both our problems is that the watermarked image needs to be placed on top of the original...

4Sandrix -- if you decide to test this, make sure that the width and height values in the css above corresponds to the width and height of your actual photos, not the clear.gif thing
« Last Edit: February 18, 2008, 08:47:47 pm by Keyrocks »
Logged

4Sandrix

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

AgetnSmith thank you very much for that exaple, but the main idea is to not not use already watermarked image :) but thanks anyway for help :)
any other sugestions about making it with css?
I have made this, but it uses javascript :/
1. It's not confortable.
2. PNG watermark looks cind of Crapy :/
Link:
http://tetanus.caucasus.net/water/new/
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

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Need Help with mouseover & png images - pls help
« Reply #13 on: July 17, 2006, 01:18:30 am »

Haven't tested it in IE/Win (or any other browser/Win), but I have tested with Safari and Firefox in Mac OS X and this works, albeit with some weird differences in positioning that I'm too tired to figure out right now. In Firefox, the div holding the images ends up way too high, compared to Safari which displays it as I think it should be displayed. Be that as it may, have a look, see if it fits your bill. If it does, steal the CSS and play with it.

The fiddly bit is that you'll have to create an id in the stylesheet for each actual image that you're going to put on a page. That is then used in the hyperlink, to trigger the watermark on hover. Here are the key styles for the images/links:

Quote
#side-a-side { text-align: center; display: inline; vertical-align: top; }

img.thumb, img.thumb a {
   width: 80px;
   height: 80px;
   filter: alpha(opacity=0);
   -moz-opacity: 0.01;
   opacity: 0.01;
}

img.thumb:hover {
   filter: alpha(opacity=90);
   -moz-opacity: 0.9;
   opacity: 0.9;
}

#image-name {
   font-size: 80px;
   width: 80px;
   height: 80px;
   background: #fff url(../images/image-name.jpg) no-repeat;
   margin: .1em;
}
An alternative to setting absolute values for image width and height is to define the width in px (as it is) and setting height to "auto". That way you only have to remember one value... ;D

The stylesheet is here, by the way: http://www.inkpattern.com/gamma/css/water.css
Logged

4Sandrix

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

Thank you very much :)
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
Pages: [1] 2 3 4