Author Topic: [Style] With "mouseover" Pictureframe Desaturate  (Read 14033 times)

0 Members and 1 Guest are viewing this topic.

Offline fermachado

  • Jr. Member
  • **
  • Posts: 92
    • View Profile
[Style] With "mouseover" Pictureframe Desaturate
« on: October 15, 2010, 06:23:02 PM »
Hi,


Someone know how this work! :?
If click or onmouseover we desaturate the image.

You can see here http://www.photochart.com/photo_8291_Butterfly.html.

Thanks
www.globalfoto.net

Sintra - Portugal

Offline Lesik

  • Newbie
  • *
  • Posts: 38
    • View Profile
Re: [Style] With "mouseover" Pictureframe Desaturate
« Reply #1 on: October 19, 2010, 11:41:41 AM »
На сколько хватило моего английского речь идет о изменении фона под картинкой?

Тогда.........

В файле header.html вставьте следующий кусок кода перед </head>:   (in header.html before </head> insert)
Code: [Select]
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
function bg(color){
document.getElementById("imagebg").style.backgroundColor = color;
}
</script>

В файле details.html найдите <hr size="1" /> и после вставьте:    (in file details.html find <hr size="1" /> insert before)
Code: [Select]
   <table align="left" cellspacing='1' cellpadding="0" border='0'>
        <tr>
            <td width='12' height='12' bgcolor='#000' style="border: 1px solid #828282;" onmouseover=bg('#000')></td>
            <td width='12' height='12' bgcolor='#171717' style="border: 1px solid #828282;" onmouseover=bg('#171717')>&nbsp;</td>
            <td width='12' height='12' bgcolor='#2E2E2E' style="border: 1px solid #828282;" onmouseover=bg('#2E2E2E')>&nbsp;</td>
            <td width='12' height='12' bgcolor='#464646' style="border: 1px solid #828282;" onmouseover=bg('#464646')>&nbsp;</td>
            <td width='12' height='12' bgcolor='#5D5D5D' style="border: 1px solid #828282;" onmouseover=bg('#5D5D5D')>&nbsp;</td>
            <td width='12' height='12' bgcolor='#747474' style="border: 1px solid #828282;" onmouseover=bg('#747474')>&nbsp;</td>
            <td width='12' height='12' bgcolor='#8B8B8B' style="border: 1px solid #828282;" onmouseover=bg('#8B8B8B')>&nbsp;</td>
            <td width='12' height='12' bgcolor='#A2A2A2' style="border: 1px solid #828282;" onmouseover=bg('#A2A2A2')>&nbsp;</td>
            <td width='12' height='12' bgcolor='#B9B9B9' style="border: 1px solid #828282;" onmouseover=bg('#B9B9B9')>&nbsp;</td>
            <td width='12' height='12' bgcolor='#D1D1D1' style="border: 1px solid #828282;" onmouseover=bg('#D1D1D1')>&nbsp;</td>
            <td width='12' height='12' bgcolor='#E8E8E8' style="border: 1px solid #828282;" onmouseover=bg('#E8E8E8')>&nbsp;</td>
            <td width='12' height='12' bgcolor='#FFFFFF' style="border: 1px solid #828282;" onmouseover=bg('#FFFFFF')>&nbsp;</td>
        </tr>
    </table>


так же найдите в файле details.html:   (find in details.html)
Code: [Select]
            <div align="center">
 {image}

и замените на:   (replace on)
Code: [Select]
            <div align="center" id="imagebg">
                                        {image}

Offline x23piracy

  • Sr. Member
  • ****
  • Posts: 420
    • View Profile
    • FHG
Re: [Style] With "mouseover" Pictureframe Desaturate
« Reply #2 on: October 19, 2010, 02:44:44 PM »
Hi,

thanks this works great  :thumbup:



Do you also know how to make the magnifying glass?
http://www.photochart.com/photo_8291_Butterfly.html



EDIT:

I tried to extract the code for the magnifying thing:


Code: [Select]
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
var zoom = 0;
var flipV = 0;
var flipH = 0;
var invert = 0;
var grayscale = 0;

var agt = navigator.userAgent.toLowerCase();
var apName = navigator.appName.toLowerCase();
var is_nav4 = ((apName == "netscape") && (parseInt(navigator.appVersion) < 5))? 1:0;
var is_ie4 = ((apName == "msie") && (parseInt(navigator.appVersion) < 5))? 1:0;
var is_dom = document.getElementById? 1:0;
var is_gecko = (agt.indexOf('gecko') != -1)? 1:0;
var is_ie = (agt.indexOf("msie") != -1)? 1:0;
var is_nav = (agt.indexOf('mozilla')!=-1) && (agt.indexOf('opera')==-1)? 1:0;
var is_ie5up = (is_dom && is_ie)? 1:0;
var is_nav6up = (is_dom && (is_gecko || is_nav))? 1:0;


var docObj = is_nav4? "document.": is_ie4? "document.all.": is_dom? "document.getElementById('": 0;
var styleObj = is_nav4? "": is_ie4? "": is_dom? "')":0;


function mtrack(event) {

var x,y,x1,x2,y1,y2,dx=0,dy=0;
fact=2;
opp=100;

if (is_dom && window.event) {
x = window.event.clientX + 10 + document.body.scrollLeft;
y = window.event.clientY + 10 + document.body.scrollTop;
} else if (is_ie4) {
y = eval(event.y + 5 + document.body.scrollTop);
x = eval(event.x+ 20 );
} else if (is_nav4) {
y = eval(event.pageY + 5);
x = eval(event.pageX + 20);
} else {
x = event.clientX + 5 + window.scrollX;
y = event.clientY + 10 + window.scrollY;
}


x = x-left;
y = y-top;

document.images.een.style.display = 'block';

x1=-opp+(x+dx)*fact; //left
y1=-opp+(y+dy)*fact; //top
x2=+opp+(x+dx)*fact; //right
y2=+opp+(y+dy)*fact; //bottom

document.images.een.style.left=(x+dx)*(1-fact)+left;
document.images.een.style.top=(y+dy)*(1-fact)+top;
document.images.een.style.clip="rect(" +y1 +"px," +x2 +"px," +y2 +"px," +x1 +"px)";
}

function zoomeIn(event)
{
if(zoom) mtrack(event);
}

function zoomPush()
{
if(zoom){ zoom = 0; document.images.een.style.display = 'none'; }
else{ zoom = 1; }
}

function flipVPush()
{
if (!flipV)
{
twee.style.filter = '';
een.style.filter = '';
twee.style.filter = 'flipv()';
een.style.filter = 'flipv()';
flipV = 1;
}else{
twee.style.filter = '';
een.style.filter = '';
flipV = 0;
}
}

function flipHPush()
{
if (!flipH)
{
twee.style.filter = '';
een.style.filter = '';
twee.style.filter = 'fliph()';
een.style.filter = 'fliph()';
flipH = 1;
}else{
twee.style.filter = '';
een.style.filter = '';
flipH = 0;
}
}

function invertPush()
{
if (!invert)
{
twee.style.filter = '';
een.style.filter = '';
twee.style.filter = 'invert';
een.style.filter = 'invert';
invert = 1;
}else{
twee.style.filter = '';
een.style.filter = '';
invert = 0;
}
}

function grayscalePush()
{
if (!grayscale)
{
twee.style.filter = '';
een.style.filter = '';
twee.style.filter = 'gray';
een.style.filter = 'gray';
grayscale = 1;
}else{
twee.style.filter = '';
een.style.filter = '';
grayscale = 0;
}
}
//-->
</SCRIPT>
<script language="javascript">
function replyprompt(cnt, name){
var ta = elem("textarea1");
var txt = "#" + cnt + " " + name + ": ";
if(ta.value == ""){
ta.value = txt;
}else{
ta.value += "\n" + txt;
}
ta.focus();
}
function bg(color){
document.getElementById("imagebg").style.backgroundColor = color;
}
</script>


<script language="javascript">
if(is_ie)
{
var ico_magnify_over = new Image;
ico_magnify_over.src = 'http://www.photochart.com/templates/default/images/ico_magnify_over.gif';
var ico_vertical_flip_over = new Image;
ico_vertical_flip_over.src = 'http://www.photochart.com/templates/default/images/ico_vertical_flip_over.gif';
var ico_horizontal_flip_over = new Image;
ico_horizontal_flip_over.src = 'http://www.photochart.com/templates/default/images/ico_horizontal_flip_over.gif';
var ico_invert_colors_over = new Image;
ico_invert_colors_over.src = 'http://www.photochart.com/templates/default/images/ico_invert_colors_over.gif';
var ico_grayscale_over = new Image;
ico_grayscale_over.src = 'http://www.photochart.com/templates/default/images/ico_grayscale_over.gif';
}
</script>
 <table border="0" cellspacing="0" cellpadding="0">
                             <tr>
                               <td align="center"><a href="javascript:zoomPush()" onmouseover="ico_magnify.src='http://www.photochart.com/templates/default/images/ico_magnify_over.gif'" onmouseout="ico_magnify.src='http://www.photochart.com/templates/default/images/ico_magnify.gif'"><img src="http://www.photochart.com/templates/default/images/ico_magnify.gif" name="ico_magnify" id="ico_magnify" width="31" height="31" border="0" /></a></td>
                               <td align="center"><a href="javascript:flipVPush()" onmouseover="ico_vertical_flip.src='http://www.photochart.com/templates/default/images/ico_vertical_flip_over.gif'" onmouseout="ico_vertical_flip.src='http://www.photochart.com/templates/default/images/ico_vertical_flip.gif'"><img src="http://www.photochart.com/templates/default/images/ico_vertical_flip.gif" name="ico_vertical_flip" id="ico_vertical_flip" width="31" height="31" border="0" style="display: none" /></a></td>
                               <td align="center"><a href="javascript:flipHPush()" onmouseover="ico_horizontal_flip.src='http://www.photochart.com/templates/default/images/ico_horizontal_flip_over.gif'" onmouseout="ico_horizontal_flip.src='http://www.photochart.com/templates/default/images/ico_horizontal_flip.gif'"><img src="http://www.photochart.com/templates/default/images/ico_horizontal_flip.gif" name="ico_horizontal_flip" id="ico_horizontal_flip" width="31" height="31" border="0" style="display: none" /></a></td>
                               <td align="center"><a href="javascript:invertPush()" onmouseover="ico_invert_colors.src='http://www.photochart.com/templates/default/images/ico_invert_colors_over.gif'" onmouseout="ico_invert_colors.src='http://www.photochart.com/templates/default/images/ico_invert_colors.gif'"><img src="http://www.photochart.com/templates/default/images/ico_invert_colors.gif" name="ico_invert_colors" id="ico_invert_colors" width="31" height="31" border="0" style="display: none" /></a></td>
                               <td align="center"><a href="javascript:grayscalePush()" onmouseover="ico_grayscale.src='http://www.photochart.com/templates/default/images/ico_grayscale_over.gif'" onmouseout="ico_grayscale.src='http://www.photochart.com/templates/default/images/ico_grayscale.gif'"><img src="http://www.photochart.com/templates/default/images/ico_grayscale.gif" name="ico_grayscale" id="ico_grayscale" width="31" height="31" border="0" style="display: none" /></a></td>
                               </tr>
                           </table>
                          
<div id="imagebg" style="padding-top: 20px; padding-bottom: 20px; background-color: rgb(0, 0, 0);" align="center">
<img src="http://www.photochart.com/data/media/7/Butterfly_2.JPG" id="twee" name="twee" alt="Butterfly" border="1" height="441" width="700"><br>&nbsp;</div>
<img name="een" id="een" src="http://www.photochart.com/data/media/7/Butterfly_2.JPG" style="position: absolute; top: 584px; left: -28px; display: block; clip: rect(-434px, 904px, -234px, 704px);" height="882" width="1400">

But i could not get it work, no code failures but the zoom thing won't show up or work...
Any ideas?
               

Greetz X23
« Last Edit: October 19, 2010, 04:07:09 PM by x23piracy »

Don't trust in md5 it's unsafe change your 4i galerys password hash algorythm! second pw db field, create new hashes over some time, deny old hash. Help members that cry, send informationen mail to the rest. Camouflage new pw hash in cookie. Done!

--(◔̯◔)--

Offline fermachado

  • Jr. Member
  • **
  • Posts: 92
    • View Profile
Re: [Style] With "mouseover" Pictureframe Desaturate
« Reply #3 on: October 26, 2010, 11:29:57 AM »
Thanks,
My request is for the other function.

On mouseover or click turn the image to black and white.

By google

Спасибо,
Мой запрос для других функций.

При наведении курсора мыши или щелкните свою очередь изображения в черно-белый.   :D
www.globalfoto.net

Sintra - Portugal

Offline fermachado

  • Jr. Member
  • **
  • Posts: 92
    • View Profile
Re: [Style] With "mouseover" Pictureframe Desaturate
« Reply #4 on: November 02, 2010, 09:20:23 AM »
Find the solution for my request here.

http://www.4homepages.de/forum/index.php?topic=26374.0

works very nice

www.globalfoto.net

Sintra - Portugal