« previous next »
Pages: [1]

Author Topic: Adding DHTML Filters to images  (Read 5652 times)

0 Members and 1 Guest are viewing this topic.

Offline trk247

  • Pre-Newbie
  • Posts: 6
    • View Profile
Adding DHTML Filters to images
« on: October 30, 2002, 08:43:11 AM »
Hello All,

Great program! I was wondering if anyone has tried to apply any DHTML IE filters or transitions to their images. Such as adding an opacity filter to images that aren't onmouseover. If so, what files can I edit.

For example, on the new images box on the homepage, the template file has {new_images}. Where can I actually modify this template (if possible) to add in onmouseover and onmouseout behaviors?? I assume this is basically some call to a generalized/class based function -- how hard would it be to add in some onmouseover/mouseout effects to an image href in the gallery?


Any help appreciated.


Thanks,
Thomas
Logged

Offline V@no

  • If you don't tell me what to do, I won't tell you where you should go :)
  • Global Moderator
  • 4images Guru
  • *****
  • Posts: 17.849
  • mmm PHP...
    • View Profile
    • 4images MODs Demo
Adding DHTML Filters to images
« Reply #1 on: October 30, 2002, 11:58:19 PM »
I dont know if I understud u correctly, but I use some onmouseover fade effects:
http://come.no-ip.com
Logged
Your first three "must do" before you ask a question:
Please do not PM me asking for help unless you've been specifically asked to do so. Such PMs will be deleted without answer. (forum rule #6)
Extension for Firefox/Thunderbird: Master Password+    Back/Forward History Tweaks (restartless)    Cookies Manager+    Fit Images (restartless for Thunderbird)

Offline trk247

  • Pre-Newbie
  • Posts: 6
    • View Profile
Adding DHTML Filters to images
« Reply #2 on: October 31, 2002, 12:17:18 AM »
Yes, I'm trying to do something similar, what file or template file did you modify to add in those effects. I'm having trouble locating it.


Thanks
Logged

Offline The Sailor

  • Jr. Member
  • **
  • Posts: 84
    • View Profile
Adding DHTML Filters to images
« Reply #3 on: October 31, 2002, 07:35:43 AM »
i think you have to change in header.html file any DHTML effects try to use
this great random effects after <head>
Quote

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=23)">
Logged
(^_^)

Offline trk247

  • Pre-Newbie
  • Posts: 6
    • View Profile
Adding DHTML Filters to images
« Reply #4 on: October 31, 2002, 08:13:33 AM »
Thanks for the help. I found what I was looking for, bascially just the function get_thumbnail_code( in the functions.php file. To achieve the onmouseover/onmouseout filter behaviors, I added this js to the header.html file:

Code: [Select]

function FadeIn(thisOne){
     theImage=thisOne
     reveal=setInterval("incFilter(theImage)",1)//increment time in milliseconds

}
   function FadeOut(thisOne){
     clearInterval(reveal)
     thisOne.filters.alpha.opacity=80
}

function incFilter(current){
     if (current.filters.alpha.opacity<100)
     current.filters.alpha.opacity =100//amount to increment until 100%
else      clearInterval(reveal)
}


and this to the function get_thumbnail_code( in the functions.php file:

Code: [Select]


  $thumb = "<img src=\"".$file_src."\" border=\"0\"".$width_height." style=\"filter:alpha(opacity=80)\" onMouseover=\"FadeIn(this)\" onMouseout=\"FadeOut(this)\" alt=\"".$image_name."\" />";
    }
    else {
      $file_src = get_file_path($thumb_file_name, "thumb", $cat_id, 0, 1);
      $image_info = @getimagesize($file_src);
      $width_height = (!empty($image_info[3])) ? " ".$image_info[3] : "";
      $thumb = "<img src=\"".$file_src."\" border=\"".$config['image_border']."\"".$width_height." style=\"filter:alpha(opacity=80)\" onMouseover=\"FadeIn(this)\" onMouseout=\"FadeOut(this)\" alt=\"".$image_name."\" />";




to just add in the style and onmouseover/onmouseout elements to the img tag. I'm not sure if I want to use any transitions quite yet, but you can bascially make it work the same way (a call to a js function to perform the transition). It might work pretty well, havent tried it yet.


--Thomas
Logged
Pages: [1]
« previous next »