ingrandire logo al passaggio mouse

**ceciado.it** · 29-06-2009, 17:32

Ciao a tutti,

volevo chiedervi una mano in merito ad una modifca che voglio effettuare nel mio sito www.ceciado.it, nei loghi dei siti registrati vorrei inserire l'home page del sito però volevo
che al passaggio del mouse quest'immagine si ingrandisse, senza effetti particolari.
Il sito come potete notare è in php, sono alle primissime armi.........

Vi chiedo un aiuto per evitare per fare questa modifica in economia....

Grazie anticipatamente a tutti....

**artorius** · 29-06-2009, 18:04

prova a mettere una classe alle immagini che vuoi ingrandire (tipo MyImg, non serve uno stile serve solo per identificarle), poi prova questo script:

codice:

var percent = 5; //Percentuale d'incremento immagine

window.onload = function(){
   var allImgs = document.getElementsByTagName("img");
   for(var i = 0; i < allImgs.length; i++){
       var img = allImgs[i];
       if(img.className == "MyImg"){
          img.onmouseover = GrowImg;
          img.onmouseout = SmallImg;
       }
   }
}

var GrowImg = function(){
   var width = parseInt(this.getAttribute("width"));
   var height = parseInt(this.getAttribute("height"));
   
   this.setAttribute("oldw", width);
   this.setAttribute("oldh", height);
   
   width = Math.floor(width * (1 + 5 / 100));
   height = Math.floor(height * (1 + 5 / 100));

   this.setAttribute("width", width);
   this.setAttribute("height", height); 
}

var SmallImg = function(){
   this.setAttribute("width", this.getAttribute("oldw"));
   this.setAttribute("height", this.getAttribute("oldh")); 
}

**ceciado.it** · 29-06-2009, 23:50

Ciao artorius,

Grazie per la risposta tempestiva. Ho provato ad effettuare l'inserimento del codice che mi hai inviato ma non riesco a posizionarlo nel modo corretto. Ti volevo chiedere se mi sei mio potresti aiutare ad inserire lo script nel posto giusto... Di seguito ti ho inviato il codice php della pagina dove dovrò effettuare la modifica......

Grazie ancora.....ciao

<?php

/*--------------------------------------------------+
| X-ZERO COMMUNITY CLASSIFIEDS SCRIPT |
+================================================= ==+
| File: index.php |
| Main wrapper page |
+---------------------------------------------------+
| Copyright © 2005 Davis 'X-ZERO' John |
| Scriptlance ID: davisx0 |
| Email: support@xzeroscripts.com |
+--------------------------[ Tue, Aug 02, 2005 ]---*/

require_once("initvars.inc.php");
require_once("config.inc.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" lang="it" xml:lang="it">
<head>
<title>Ceciado – il motore dei siti – web directory: Ultimi Iscritti</title>
<base href="<?php echo $script_url; ?>" />
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo $langx['charset']; ?>" />
<meta name="keywords" content="<?php echo $meta_keywords; ?>" />
<meta name="description" content="Ceciado – il motore dei siti – web directory: Ultimi Iscritti" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="pager.css" />
<link rel="stylesheet" type="text/css" href="cal.css" />
<script src="prototype.js" type="text/javascript"></script>
<script type="text/javascript">
function bookmarksite(title, url){
if (document.all)
window.external.AddFavorite(url, title);
else if (window.sidebar)
window.sidebar.addPanel(title, url, "")
}
</script>
</head>

<body>
<div id="CONTENITORE">
<?php include("header2.inc.php"); ?>

<h1>ULTIMI ISCRITTI</h1>

<div align="center">
<table width="650" border="0">
<tr>
<td>
<h2>

<?php
if($latestads_count)
{
?>

<div class="latestads">

<table border="0" cellspacing="0" cellpadding="0" class="adlisting" width="100%">

<?php

$sql = "SELECT a.*, ct.cityname,co.countryid , UNIX_TIMESTAMP(a.createdon) AS timestamp, feat.adid AS isfeat,
COUNT(*) AS piccount, p.picfile AS picfile, scat.subcatname, scat.catid, cat.catname
FROM $t_ads a
INNER JOIN $t_cities ct ON a.cityid = ct.cityid
LEFT OUTER JOIN $t_countries co ON ct.countryid = co.countryid
INNER JOIN $t_subcats scat ON a.subcatid = scat.subcatid
INNER JOIN $t_cats cat ON scat.catid = cat.catid
LEFT OUTER JOIN $t_featured feat ON a.adid = feat.adid AND feat.adtype = 'A' AND feat.featuredtill >= NOW()
LEFT OUTER JOIN $t_adpics p ON a.adid = p.adid AND p.isevent = '0'
WHERE $visibility_condn
$loc_condn
GROUP BY a.link
ORDER BY a.createdon DESC
LIMIT $latestads_count";

$res_latest = mysql_query($sql) or die($sql.mysql_error());

$css_first = "_first";
while($row = mysql_fetch_array($res_latest))
{

$catname_inurl = RemoveBadURLChars($row['catname']);
$subcatname_inurl = RemoveBadURLChars($row['subcatname']);

if($sef_urls) $url = "{$vbasedir}-$row[countryid]/posts/{$row[catid]}_{$catname_inurl}/{$row[subcatid]}_{$subcatname_inurl}/$row[adid]_" . RemoveBadURLChars($row['adtitle']) . ".html";
else $url = "?view=showad&adid=$row[adid]&cityid=$row[countryid]&lang=$xlang{$link_extra}";

?>

<?php
if($row['isfeat'])
{
//$feat_class = "class=\"featured\"";
$feat_img = "<img src=\"images/featured.gif\" align=\"absmiddle\">";
}
else
{
//$feat_class = "";
$feat_img = "";
}

if($row['picfile'])
{
$picfile = $row['picfile'];
$imgsize = GetThumbnailSize("{$datadir[adpics]}/{$picfile}", $tinythumb_max_width, $tinythumb_max_height);
}
else
{
$picfile = "";
}
?>

<tr>

<td width="25%">
<a href="goto.php?id=<?php echo $row['adid'] ?>" class="adtitle" target="_blank">
<?php
if($row['picfile'] && $ad_thumbnails)
{
$imgsize = GetThumbnailSize("{$datadir[adpics]}/{$row[picfile]}", $tinythumb_max_width, $tinythumb_max_height);
?>
[img]<?php echo [/img]" border="0" width="<?php echo $imgsize[0]; ?>" height="<?php echo $imgsize[1]; ?>" style="border:1px solid black; margin-right:5px">
<?php
}
?>
</a>
</td>
<td width="75%">
http://<?php echo $row['link'] ?>

<a href="goto.php?id=<?php echo $row['adid'] ?>" class="adtitle" target="_blank">
<?php echo $row['adtitle']; ?>
</a>

<?php
if(true)
{
echo "<span class=''>";
$row['addesc'] = preg_replace("/\[\/?URL\]/", "", $row['addesc']);
echo substr($row['addesc'],0,200);
if (strlen($row['addesc'])>200) echo "...";
echo "</span>";
}
?>

<?php
if($row['pref1']!="" && $row['tel1']!="")
echo "Tel.: ". $row['pref1']."/". $row['tel1'];
else
echo "Tel.: N/D";

if($row['prefax']!="" && $row['fax']!="")
echo "
Fax: ". $row['prefax']."/". $row['fax'];
else
echo " - Fax.: N/D";
?>

E-mail:
<?php echo $row['email'] ?>

<?php
if($row['indirizzo']!="")
echo "" .$row['indirizzo'];
else
echo "Indirizzo: N/D";

$loc = "";
$prov = mysql_query("SELECT cityname FROM xzclf_cities WHERE cityid = ".(int)$row['provincia']."");
$line = mysql_fetch_array($prov);
$provv = $line['cityname'];
$loc = "";
if($row['area']) $loc = $row['area'];
if($xcityid < 0) $loc .= ($loc ? ", " : "")."
Città: ". $row['comune']." - Prov.: ". $provv;
if($loc) echo " $loc";

//if($row['responsabile']!="")
//echo " - " .$row['responsabile'];
//elsAe
//echo " - Responsabile: N/D";
?>

</td>

</tr>

<?php
$css_first = "";
}
?>

</table>

</h2>
</td>
</tr>
</table>
</div>

<?php include("footer.inc.php"); ?>

</div>

<div id="onde"></div>

<script type="text/javascript" >
var s_sid = 546248; var st_dominio = 4;
var cimg = 0; var cwi =150; var che =30;
</script>
<script type="text/javascript" language="javascript" src="http://s11.histats.com/js9.js"></script>
<noscript>

</p>
</noscript>

</body>
</html>

<?php
}
?>

**artorius** · 30-06-2009, 10:09

ah, ma se usi prototype è ancora più semplice.

allora nel tuo codice, dove inserisci l'immagine (magari usi i tag BBCode la prossima volta così che ti posso mettere la riga) fai:

Codice PHP:


[img]<?php echo [/img]" border="0" width="<?php echo $imgsize[0]; ?>" height="<?php echo $imgsize[1]; ?>" class="TooglerImg" />

ed aggiungi al CSS:

codice:

.TooglerImg{
   border:1px solid black; 
   margin-right:5px;
}

Poi inserisci lo script:

codice:

<script type="text/javascript">
   var percent = 5; //Percentuale d'incremento immagine
   Event.observe(window, 'load', function(){
      var imgs = $$('img.TooglerImg');
      imgs.each(function(item){
           item.observe('mouseover', OverImg);
           item.observe('mouseout', OutImg);
      });
   });
   
   var OverImg = function(){
      var width = parseInt(this.readAttribute("width"));
      var height = parseInt(this.readAttribute("height"));
   
      this.writeAttribute("oldw", width);
      this.writeAttribute("oldh", height);
   
      width = (width * (1 + percent / 100)).floor();
      height = (height * (1 + percent / 100)).floor();

      this.writeAttribute("width", width);
      this.writeAttribute("height", height);
   }

   var OutImg = function(){
      this.writeAttribute("width", this.readAttribute("oldw"));
      this.writeAttribute("height", this.readAttribute("oldh")); 
   }
</script>

**ceciado.it** · 01-07-2009, 01:03

Ciao artorius,

ho provato ad effetture le modiche che mi hai inviato ma molto probabilmente ho commesso
qualche errore...... (l'ingrandimento viene eseguito ma ingrandisce il testo laterale e le altre
immagini) se vuoi puoi dare una controllata direttamente dal seguente link www.ceciado.it/iscritti2.php

Grazie ancora

Cmq ti invio la modifica che ho effettuato :

Codice PHP:


<?php



/*--------------------------------------------------+

| X-ZERO COMMUNITY CLASSIFIEDS SCRIPT               |

+===================================================+

| File: index.php                                   |

| Main wrapper page                                 |

+---------------------------------------------------+

| Copyright © 2005 Davis 'X-ZERO' John              |

| Scriptlance ID: davisx0                           |

| Email: [email]support@xzeroscripts.com[/email]                   |

+--------------------------[ Tue, Aug 02, 2005 ]---*/







require_once("initvars.inc.php");

require_once("config.inc.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" lang="it" xml:lang="it">

<head>

<title>Ceciado – il motore dei siti – web directory: Ultimi Iscritti</title>

<base href="<?php echo $script_url; ?>" />

<meta http-equiv="Content-Type" content="text/html; charset=<?php echo $langx['charset']; ?>" />

<meta name="keywords" content="<?php echo $meta_keywords; ?>" />

<meta name="description" content="Ceciado – il motore dei siti – web directory: Ultimi Iscritti" />

<link rel="stylesheet" type="text/css" href="style.css" />

<link rel="stylesheet" type="text/css" href="pager.css" />

<link rel="stylesheet" type="text/css" href="cal.css" />

<script src="prototype.js" type="text/javascript"></script>

<script type="text/javascript">

function bookmarksite(title, url){

if (document.all)

window.external.AddFavorite(url, title);

else if (window.sidebar)

window.sidebar.addPanel(title, url, "")

}

</script>

</head>



<body>

<div id="CONTENITORE">

<?php include("header2.inc.php"); ?>





    




    

<h1>ULTIMI ISCRITTI</h1>










<div align="center">

<table width="650" border="0">

<tr> 

<td>

<h2>



        

<?php

if($latestads_count)

{

?>



<div class="latestads">



<table border="0" cellspacing="0" cellpadding="0"  class="adlisting" width="100%">





<?php



    $sql = "SELECT a.*, ct.cityname,co.countryid , UNIX_TIMESTAMP(a.createdon) AS timestamp, feat.adid AS isfeat,

                COUNT(*) AS piccount, p.picfile AS picfile, scat.subcatname, scat.catid, cat.catname

            FROM $t_ads a

                INNER JOIN $t_cities ct ON a.cityid = ct.cityid

    LEFT OUTER JOIN $t_countries co ON ct.countryid = co.countryid 

                INNER JOIN $t_subcats scat ON a.subcatid = scat.subcatid

                INNER JOIN $t_cats cat ON scat.catid = cat.catid

                LEFT OUTER JOIN $t_featured feat ON a.adid = feat.adid AND feat.adtype = 'A' AND feat.featuredtill >= NOW()

                LEFT OUTER JOIN $t_adpics p ON a.adid = p.adid AND p.isevent = '0'

            WHERE $visibility_condn

                $loc_condn 

            GROUP BY a.link 

            ORDER BY a.createdon DESC

            LIMIT $latestads_count";



    $res_latest = mysql_query($sql) or die($sql.mysql_error());



    $css_first = "_first";

    while($row = mysql_fetch_array($res_latest))

    {

        

        $catname_inurl = RemoveBadURLChars($row['catname']);

        $subcatname_inurl = RemoveBadURLChars($row['subcatname']);



        if($sef_urls) $url = "{$vbasedir}-$row[countryid]/posts/{$row[catid]}_{$catname_inurl}/{$row[subcatid]}_{$subcatname_inurl}/$row[adid]_" . RemoveBadURLChars($row['adtitle']) . ".html";

        else $url = "?view=showad&adid=$row[adid]&cityid=$row[countryid]&lang=$xlang{$link_extra}";

        

?>

    

        <?php 

        if($row['isfeat']) 

        {

            //$feat_class = "class=\"featured\"";

            $feat_img = "<img src=\"images/featured.gif\" align=\"absmiddle\">";

        } 

        else 

        { 

            //$feat_class = "";

            $feat_img = "";

        }



        if($row['picfile']) 

        {

            $picfile = $row['picfile'];

            $imgsize = GetThumbnailSize("{$datadir[adpics]}/{$picfile}", $tinythumb_max_width, $tinythumb_max_height);

        }

        else 

        {

            $picfile = "";

        }

        ?>



        <tr>



                <td width="25%">

                    <a href="goto.php?id=<?php echo $row['adid'] ?>" class="adtitle" target="_blank">

                        <?php 

                        if($row['picfile'] && $ad_thumbnails) 

                        { 

                            $imgsize = GetThumbnailSize("{$datadir[adpics]}/{$row[picfile]}", $tinythumb_max_width, $tinythumb_max_height);

                        ?>

                        

                        [img]<?php echo [/img]" border="0" width="<?php echo $imgsize[0]; ?>" height="<?php echo $imgsize[1]; ?>" class="TooglerImg" />    

                        <

                        <?php 

                        }

                        ?>

                    </a>

                </td>

                <td width="75%">

                    [url="goto.php?id=<?php echo $row['adid'] ?>"][url]http://[/url]<?php echo $row['link'] ?>[/url]


                    <a href="goto.php?id=<?php echo $row['adid'] ?>" class="adtitle" target="_blank">

                        <?php echo $row['adtitle']; ?>

                    </a>

                    


                    <?php 

                    if(true) 

                    { 

                        echo "<span class=''>";

                        $row['addesc'] = preg_replace("/\[\/?URL\]/", "", $row['addesc']);

                        echo substr($row['addesc'],0,200);

                        if (strlen($row['addesc'])>200) echo "...";

                        echo "</span>";

                    } 

                    ?>

                    


                    <?php 

                    if($row['pref1']!="" && $row['tel1']!="")

                        echo "Tel.: ". $row['pref1']."/". $row['tel1'];

                    else

                        echo "Tel.: N/D";

                    

                                    

                    if($row['prefax']!="" && $row['fax']!="")

                    echo " 
 Fax: ". $row['prefax']."/". $row['fax'];

                    else

                        echo " - Fax.: N/D";

                     ?>

                    
 

                    E-mail: 

                    [email="<?php echo $row['email'] ?>"]<?php echo $row['email'] ?>[/email]

                    


                    <?php 

                    if($row['indirizzo']!="")

                        echo "" .$row['indirizzo'];

                    else

                        echo "Indirizzo: N/D";

            

                        $loc = "";

                        $prov = mysql_query("SELECT cityname FROM xzclf_cities WHERE cityid = ".(int)$row['provincia']."");

                        $line = mysql_fetch_array($prov);

                        $provv = $line['cityname'];            

                        $loc = "";

                        if($row['area']) $loc = $row['area'];

                        if($xcityid < 0) $loc .= ($loc ? ", " : "")." 
Città:  ". $row['comune']." - Prov.:  ". $provv;

                        if($loc) echo " $loc";

                        

                        //if($row['responsabile']!="")

                            //echo " - " .$row['responsabile'];

                        //elsAe

                            //echo " - Responsabile: N/D";            

                    ?>

                    


                </td>





            

        </tr>



<?php

        $css_first = "";



    }

?>



</table>

<script type="text/javascript">

   var percent = 80; //Percentuale d'incremento immagine

   Event.observe(window, 'load', function(){

      var imgs = $$('img.TooglerImg');

      imgs.each(function(item){

           item.observe('mouseover', OverImg);

           item.observe('mouseout', OutImg);

      });

   });

   

   var OverImg = function(){

      var width = parseInt(this.readAttribute("width"));

      var height = parseInt(this.readAttribute("height"));

   

      this.writeAttribute("oldw", width);

      this.writeAttribute("oldh", height);

   

      width = (width * (1 + percent / 100)).floor();

      height = (height * (1 + percent / 100)).floor();



      this.writeAttribute("width", width);

      this.writeAttribute("height", height);

   }



   var OutImg = function(){

      this.writeAttribute("width", this.readAttribute("oldw"));

      this.writeAttribute("height", this.readAttribute("oldh")); 

   }

</script>









</h2>

</td>

</tr>

</table>

</div>    

            

        

            

            

            













<?php include("footer.inc.php"); ?>

    

                



    </div> 



<div id="onde"></div>            

    



<script  type="text/javascript" >

var s_sid = 546248; var st_dominio = 4; 

var cimg = 0; var cwi =150; var che =30;

</script>

<script  type="text/javascript" language="javascript" src="http://s11.histats.com/js9.js"></script>

<noscript>



[img]http://s4.histats.com/stats/0.gif?546248&amp;1[/img]</p>

</noscript>







</body>

</html>



<?php

}

?>

**artorius** · 01-07-2009, 20:39

mmm in effetti il funzionamento non è proprio perfetto, prova ad alterare lo script in:

codice:

<script type="text/javascript">
   var percent = 80; //Percentuale d'incremento immagine
   Event.observe(window, 'load', function(){
      var imgs = $$('img.TooglerImg');
      imgs.each(function(item){
            var width = parseInt(this.readAttribute("width"));
            var height = parseInt(this.readAttribute("height"));

            this.writeAttribute("originalw", width);
            this.writeAttribute("originalh", height);

            width = (width * (1 + percent / 100)).floor();
            height = (height * (1 + percent / 100)).floor();   

            this.writeAttribute("bigw", width);
            this.writeAttribute("bigh", height);

            item.observe('mouseover', Toogle);
            item.observe('mouseout', OutImg);
      });
   });
   
   var OverImg = function(){
      this.writeAttribute("width", this.readAttribute("bigw"));
      this.writeAttribute("height", this.readAttribute("bigh"));
   }

   var OutImg = function(){
      this.writeAttribute("width", this.readAttribute("originalw"));
      this.writeAttribute("height", this.readAttribute("originalh"));
   }
</script>

**ceciado.it** · 01-07-2009, 23:06

ho aggiornato lo script ma non funziona.....
l'ho copiato e l'ho sostituito ma forse c'è quche cosa che non va....

**artorius** · 02-07-2009, 09:14

scusa, ho fatto un errore io:

codice:

<script type="text/javascript">
var percent = 80; //Percentuale d'incremento immagine
Event.observe(window, 'load', function(){
   var imgs = $$('img.TooglerImg');
   imgs.each(function(item){
         var width = parseInt(item.readAttribute("width"));
         var height = parseInt(item.readAttribute("height"));

         item.writeAttribute("originalw", width);
         item.writeAttribute("originalh", height);

         width = (width * (1 + percent / 100)).floor();
         height = (height * (1 + percent / 100)).floor();   

         item.writeAttribute("bigw", width);
         item.writeAttribute("bigh", height);

         item.observe('mouseover', OverImg);
         item.observe('mouseout', OutImg);
   });
});

var OverImg = function(){
   this.writeAttribute("width", this.readAttribute("bigw"));
   this.writeAttribute("height", this.readAttribute("bigh"));
}

var OutImg = function(){
   this.writeAttribute("width", this.readAttribute("originalw"));
   this.writeAttribute("height", this.readAttribute("originalh"));
}
</script>

**ceciado.it** · 04-07-2009, 19:19

ma quale scusa, sono io che ti devo ringraziare...
cmq ho provato cn questo nuovo script ma non funziona... puoi verificarlo su www.ceciado.it/iscritti3.php

ciao

**artorius** · 04-07-2009, 20:22

guarda lo script funziona è il fatto che il layout è liquido che lo fa sballare, se imposti la grandezza delle celle che contengono le immagini ed imposti le stesse in position: absolute; dovresti vedere un miglioramento.

Discussione: ingrandire logo al passaggio mouse

Strumenti discussione

Ricerca discussione

Visualizza

ingrandire logo al passaggio mouse

Permessi di invio