Romanian PC Forum Sabitech Media - web design, gazduire web, promovare, seo, logo design si branding


Go Back   Romanian PC Forum > Forum General > Webmaster's Section > Script-uri Web

Script-uri Web Instalare/configurare, care e alegerea perfecta pentru tine? Totul despre Forum-uri: instalare, modificare, skin-uri...


Reply
 
Thread Tools
Old 02.06.2011, 19:44   #1
RaZeC
RPC Senior Member
 
RaZeC's Avatar
 
Join Date: 30.05.2011
Location: Constanta
Age: 27
Posts: 134
Thanks: 239
Thanked 48 Times in 36 Posts
Send a message via Yahoo to RaZeC Send a message via Skype™ to RaZeC
Exclamation Ma bate scriptul de image rollover!

Ma tot chinui sa fac butoane in format de imagini ce se schimba cand trec mouse-ul peste ele. Si nu imi iese mai mult de unul, ma poate ajuta cineva? tot incerc , dar nu am notiuni in javascript!
Unul singur mi-a iesit! voi posta aici codul sursa:
Multumesc


Codul:

<
Quote:
html xmlns="http://www.w3.org/1999/xhtml">

<head>
<script language="Javascript">

if (document.images) {
button1 = new Image
button2 = new Image
button3 = new Image
button4 = new Image

button1.src = 'Butoane/Untitled-3.gif'
button2.src = 'Butoane/overlay.gif'
}

</script>
<title>RaZ Ec</title>
</head>

<body style="background-color: #000000; background-image: url('Imagini/Between_Darkness_and_Wonder2.jpg'); background-position: center">
<form method="post">
</form>
<p>&nbsp;</p>
<div id="layer1" style="position: absolute; width: 668px; height: 87px; z-index: 1; left: 37px; top: 33px"><a href="http://java-scripts.net" onmouseover="document.rollover.src=button2.src" onmouseout="document.rollover.src=button1.src"><a href="http://java-scripts.net" onmouseover="document.rollover.src=button2.src" onmouseout="document.rollover.src=button1.src"></a><a href="http://java-scripts.net" onmouseover="document.rollover.src=button2.src" onmouseout="document.rollover.src=button1.src"><im g src="Butoane/Untitled-3.gif" name="rollover" width="123" height="42" border=0 /></a></div>

</body>

</html>
__________________
<font face=Times New Roman>The End More Than Justifies The Means</font>
RaZeC is offline   Reply With Quote
Old 02.06.2011, 20:00   #2
kittmask
RPC Gold Member
 
Join Date: 13.12.2009
Location: Madrid
Posts: 3,716
Thanks: 1,716
Thanked 3,035 Times in 1,756 Posts
Send a message via Yahoo to kittmask
Default Re: Ma bate scriptul de image rollover!

Am folosit WYSIWYG Web Builder ca sa pun doar o imagine cu efectul,si l-am salvat in format html,dar nu am inteles ce anume vrei tu sa faca,cum adica nu merge mai mult de unul??



Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Page</title>
<meta name="generator" content="WYSIWYG Web Builder - http://www.wysiwygwebbuilder.com">
<style type="text/css">
body
{
   background-color: #FFFFFF;
   color: #000000;
}
</style>
<script type="text/javascript" src="./jquery-1.4.2.min.js"></script>
<style type="text/css">
#RollOver1 a
{
   display: block;
   position: relative;
}
#RollOver1 a img
{
   position: absolute;
   z-index: 1;
   border-width: 0px;
}
#RollOver1 span
{
   display: block;
   height: 202px;
   width: 200px;
   position: absolute;
   z-index: 2;
}
</style>
<script type="text/javascript">
<!--
function PreloadImages()
{
   var imageObj = new Image();
   var images = new Array();
   images[0]="./images/Belgrano1.jpg";
   for (var i=0; i<=0; i++)
   {
      imageObj.src = images[i];
   }
}
// -->
</script>
<script type="text/javascript">
$(document).ready(function()
{
   $("#RollOver1 .hover").hide();
   $("#RollOver1 a").hover(function()
   {
      $("#RollOver1 .hover").show();
      $(this).children("span").hide();
   }, function()
   {
      $(this).children("span").show();
      $("#RollOver1 .hover").hide();
   })
});
</script>
</head>
<body>
<div id="wb_Image1" style="margin:0;padding:0;position:absolute;left:113px;top:299px;width:377px;height:205px;text-align:left;z-index:0;">
<img src="images/1-0444M_3D.jpg" id="Image1" alt="" border="0" style="width:377px;height:205px;"></div>
<div id="RollOver1" style="position:absolute;overflow:hidden;left:123px;top:60px;width:200px;height:202px;z-index:1">
<a href="">
<img class="hover" alt="" src="images/Belgrano1.jpg" style="left:0px;top:0px;width:200px;height:202px">
<span><img alt="" src="images/3498bo4.jpg" style="left:0px;top:0px;width:200px;height:202px"></span>
</a>
</div>
</body>
</html>
__________________








Last edited by kittmask; 02.06.2011 at 20:02. Reason: ..
kittmask is offline   Reply With Quote
Old 02.06.2011, 20:05   #3
bogdan
RPC Super Moderator
 
bogdan's Avatar
 
Join Date: 26.06.2010
Posts: 5,349
Thanks: 5,862
Thanked 7,861 Times in 3,997 Posts
Default Re: Ma bate scriptul de image rollover!

RaZeC, inca n-am incercat codul, insa daca te uiti cu atentie, vezi ca deschizi un prim tag <a href....> pe care ai uitat sa-l inchizi cu </a>
Restul tag-urilor <a > au si inchiderile corecte </a>.

Sugestia mea cand scrii cod html, e sa il pui in formatul:

<a href=asdfasdf asdfasdf burru buru>
</a>
<a href=tralalala tralala>
</a>

Asa vei vedea usor daca lipseste ceva; nu concatena tot codul pe un singur rand ca devine greu lizibil


Bafta & succes !
__________________
Imi place Romanian PC Forum - www.rpc-forum.ro!

Last edited by bogdan; 02.06.2011 at 20:09.
bogdan is offline   Reply With Quote
The Following User Says Thank You to bogdan For This Useful Post:
RaZeC (02.06.2011)
Old 02.06.2011, 20:39   #4
RaZeC
RPC Senior Member
 
RaZeC's Avatar
 
Join Date: 30.05.2011
Location: Constanta
Age: 27
Posts: 134
Thanks: 239
Thanked 48 Times in 36 Posts
Send a message via Yahoo to RaZeC Send a message via Skype™ to RaZeC
Default Re: Ma bate scriptul de image rollover!

Mai pe scurt vreau sa fac butoane care sa se schimbe cand treci cu mouse-ul peste ele . Si nu imi iese decat unul!

Ceva genul asta!
http://www.java-scripts.net/javascri...r-Script.phtml

Am incercat sa alterez scriptul dar degeaba, nu am competenta necesara pe scurt sunt NOOB!
__________________
<font face=Times New Roman>The End More Than Justifies The Means</font>
RaZeC is offline   Reply With Quote
Old 02.06.2011, 20:51   #5
kittmask
RPC Gold Member
 
Join Date: 13.12.2009
Location: Madrid
Posts: 3,716
Thanks: 1,716
Thanked 3,035 Times in 1,756 Posts
Send a message via Yahoo to kittmask
Default Re: Ma bate scriptul de image rollover!

Aha inteleg.Eu folosesc doua programe pentru asa ceva 123FlashMenu si AllWebMenus.
Sa vedem daca am putin timp iti fac citeva modele de scripturi.
__________________







kittmask is offline   Reply With Quote
Old 02.06.2011, 21:07   #6
bogdan
RPC Super Moderator
 
bogdan's Avatar
 
Join Date: 26.06.2010
Posts: 5,349
Thanks: 5,862
Thanked 7,861 Times in 3,997 Posts
Default Re: Ma bate scriptul de image rollover!

Defineste rollover-uri diferite ! rollover_1 rollover_2 rollover_3.
Uite codul:

Bafta tare & ENJOY !

<script language="Javascript">
<!--
if (document.images) {
button11 = new Image
button12 = new Image
button21 = new Image
button22 = new Image
button31 = new Image
button32 = new Image

button11.src = 'img1.gif'
button12.src = 'img2.gif'
button21.src = 'img1.gif'
button22.src = 'img2.gif'
button31.src = 'img1.gif'
button32.src = 'img2.gif'
}
//-->
</script>
<BODY>
<a href="http://java-scripts.net" onmouseover="document.rollover_1.src=button12.src" onmouseout="document.rollover_1.src=button11.src"> <img src="img1.gif" border=0 name="rollover_1">
</a>

<a href="http://java-scripts.net" onmouseover="document.rollover_2.src=button22.src" onmouseout="document.rollover_2.src=button21.src"> <img src="img1.gif" border=0 name="rollover_2">
</a>

<a href="http://java-scripts.net" onmouseover="document.rollover_3.src=button32.src" onmouseout="document.rollover_3.src=button31.src"> <img src="img1.gif" border=0 name="rollover_3">
</a>

</BODY>
__________________
Imi place Romanian PC Forum - www.rpc-forum.ro!
bogdan is offline   Reply With Quote
Old 02.06.2011, 21:30   #7
sdw
RPC Gold Member
 
Join Date: 02.03.2011
Age: 42
Posts: 978
Thanks: 20
Thanked 1,091 Times in 583 Posts
Default Re: Ma bate scriptul de image rollover!

Ce vrei tu nu se face cu javascript ci cu css.
__________________
Imi place Romanian PC Forum - www.rpc-forum.ro!
sdw is offline   Reply With Quote
The Following User Says Thank You to sdw For This Useful Post:
RaZeC (03.06.2011)
Old 02.06.2011, 21:35   #8
bogdan
RPC Super Moderator
 
bogdan's Avatar
 
Join Date: 26.06.2010
Posts: 5,349
Thanks: 5,862
Thanked 7,861 Times in 3,997 Posts
Default Re: Ma bate scriptul de image rollover!

Subscriu si eu la CSS, dar daca RaZeC a vrut sa se antreneze pe javascript, why not ? E totusi un exemplu de a scrie si a intelege un mic javascript ...
__________________
Imi place Romanian PC Forum - www.rpc-forum.ro!
bogdan is offline   Reply With Quote
Old 02.06.2011, 21:47   #9
kittmask
RPC Gold Member
 
Join Date: 13.12.2009
Location: Madrid
Posts: 3,716
Thanks: 1,716
Thanked 3,035 Times in 1,756 Posts
Send a message via Yahoo to kittmask
Default Re: Ma bate scriptul de image rollover!

Se face in java,jquery,css,html.
__________________







kittmask is offline   Reply With Quote
Old 02.06.2011, 21:56   #10
sdw
RPC Gold Member
 
Join Date: 02.03.2011
Age: 42
Posts: 978
Thanks: 20
Thanked 1,091 Times in 583 Posts
Default Re: Ma bate scriptul de image rollover!

Nu are nici un sens sa faci ceva in js cand poate fi facut in css. Mai ales ca este EXTREM de simplu:

Code:
<html>
<head>
  <style>
    a { display: block; width:100px; height: 30px; background-repeat: no-repeat; }
    a.buton1 { background-image: url('normal.png'); }
    a.buton1:hover { background-image: url('hover.png'); }
  </style>
</head>
<body>
<a class="buton1" href="http://www.rpc-forum.ro"></a>
</body>
</html>
__________________
Imi place Romanian PC Forum - www.rpc-forum.ro!
sdw is offline   Reply With Quote
The Following User Says Thank You to sdw For This Useful Post:
RaZeC (03.06.2011)
Old 02.06.2011, 21:58   #11
kittmask
RPC Gold Member
 
Join Date: 13.12.2009
Location: Madrid
Posts: 3,716
Thanks: 1,716
Thanked 3,035 Times in 1,756 Posts
Send a message via Yahoo to kittmask
Default Re: Ma bate scriptul de image rollover!

Corect.
E doar o metoda in plus.
__________________







kittmask is offline   Reply With Quote
Old 02.06.2011, 22:34   #12
XVanish
RPC Administrator
 
XVanish's Avatar
 
Join Date: 03.06.2008
Location: Baia Mare
Age: 37
Posts: 5,964
Thanks: 3,655
Thanked 3,372 Times in 1,984 Posts
Send a message via Yahoo to XVanish Send a message via Skype™ to XVanish
Default Re: Ma bate scriptul de image rollover!

Nu inteleg de ce te chinui... fa hover doar din CSS, asa:

1. foloseste butoane de tip link, a href-uri la care din CSS le dai imagine in background
2. apoi in CSS la a:hover, a:active dai alt background, adica cel care vrei sa fie la hover.
3. ca sa fie butoane diferite le dai clase diferite la a href-uri si folosesti imagini diferite in CSS la background la fiecare

Simplu...

Ca sa folosesti si text la butoane in a href mai pui un span cu textul butonului in el... astfel din CSS poti sa apelezi usor acel span/text ca sa faci ce vrei cu el... independent de imagini.

Uite un exemplu concret:

Code:
<ul id="main_menu">
<li><a class="acasa" href="index.php?page=acasa"><span>Acasa</span></a></li>
<li><a class="despre_noi" href="index.php?page=despre_noi"><span>Despre noi<span></a></li>
<li><a class="contact" href="index.php?page=contact"><span>Contact</span></a></li>
</ul>

CSS-ul il faci asa:

ul#main_menu { width:auto; height:auto; margin:0px; padding:0px; }
ul#main_menu li { float:left; width:auto; height:auto; margin:0px; padding:0px; } /* float left ca sa ti-l puna unul dupa celalalt */

/* link-ul cu imagine in fundal si span-ul/textul cand nu e hover (adica nu e mouseover) */
ul#main_menu li a.acasa, ul#main_menu li a.acasa:link, ul#main_menu li a.acasa:visited { display:inline-block; width:cat are imaginea; height:cat are imaginea; background:url('img/imagine.png') no-repeat top center; margin:0px; padding:0px; }
ul#main_menu li a.acasa span, ul#main_menu li a.acasa:link span,  ul#main_menu li a.acasa:visited span { display:inline-block; width:auto;  height:cat are imaginea; font-size:13px; color:#0000; margin:0px;  padding:cat trebuie sa centrezi textul; }

/* link-ul cu imagine in fundal si span-ul/textul cand E hover (adica e mouseover) */
ul#main_menu li a.acasa:hover, ul#main_menu li  a.acasa:active { display:inline-block; width:cat are imaginea;  height:cat are imaginea; background:url('img/imagine_hover.png') no-repeat top center; margin:0px; padding:0px; }
ul#main_menu li a.acasa:hover span,  ul#main_menu li a.acasa:active span { display:inline-block; width:auto;  height:cat are imaginea; font-size:13px; color:#0000; margin:0px;  padding:cat trebuie sa centrezi textul; }
Asta la un singur buton (la acasa)... ca sa faci separat la toate repeti ultimele 4 linii de CSS, inlocuiesti acasa cu despre_noi sau ce buton o fi si pui imaginile corespunzatoare la background-ul fiecaruia.

Sau daca vrei neaparat cu Javascript atunci spune-mi si-ti scriu o metoda mult mai usoara... ca sa nu te pierzi in cod-ul js.
DAR recomandarea mea in cazul de fata... CSS nu JS!

Daca ai intrebari... posteaza.
__________________
Internetul e distractie, nu pierde controlul!


Foloseste Google si YouTube inainte de a pune intrebari stupide!

Last edited by XVanish; 02.06.2011 at 22:52.
XVanish is offline   Reply With Quote
Old 03.06.2011, 13:02   #13
XVanish
RPC Administrator
 
XVanish's Avatar
 
Join Date: 03.06.2008
Location: Baia Mare
Age: 37
Posts: 5,964
Thanks: 3,655
Thanked 3,372 Times in 1,984 Posts
Send a message via Yahoo to XVanish Send a message via Skype™ to XVanish
Default Re: Ma bate scriptul de image rollover!

Scuze sdw, doar acum am observat ca ai postat si tu cod. Macar are un exemplu concret
__________________
Internetul e distractie, nu pierde controlul!


Foloseste Google si YouTube inainte de a pune intrebari stupide!
XVanish is offline   Reply With Quote
Old 03.06.2011, 17:05   #14
RaZeC
RPC Senior Member
 
RaZeC's Avatar
 
Join Date: 30.05.2011
Location: Constanta
Age: 27
Posts: 134
Thanks: 239
Thanked 48 Times in 36 Posts
Send a message via Yahoo to RaZeC Send a message via Skype™ to RaZeC
Default Re: Ma bate scriptul de image rollover!

Ms mult baieti, in java script nu functioneaza in schimb css-ul merge bine ><
__________________
<font face=Times New Roman>The End More Than Justifies The Means</font>
RaZeC is offline   Reply With Quote
Old 03.06.2011, 17:15   #15
bogdan
RPC Super Moderator
 
bogdan's Avatar
 
Join Date: 26.06.2010
Posts: 5,349
Thanks: 5,862
Thanked 7,861 Times in 3,997 Posts
Default Re: Ma bate scriptul de image rollover!

Quote:
Originally Posted by RaZeC View Post
in java script nu functioneaza
Ce browser folosesti ?
__________________
Imi place Romanian PC Forum - www.rpc-forum.ro!
bogdan is offline   Reply With Quote
Old 03.06.2011, 17:51   #16
XVanish
RPC Administrator
 
XVanish's Avatar
 
Join Date: 03.06.2008
Location: Baia Mare
Age: 37
Posts: 5,964
Thanks: 3,655
Thanked 3,372 Times in 1,984 Posts
Send a message via Yahoo to XVanish Send a message via Skype™ to XVanish
Default Re: Ma bate scriptul de image rollover!

Daca vrei neaparat cu JS atunci fa altfel, mai simplu, si independent pentru fiecare buton in parte, ca sa nu te pierzi in codul JS.

Un exemplu simplu de javascript ca sa schimbi imaginea, src-ul la o imagine ar fi acesta:

Code:
<a href="" onmouseover='document.getElementById("img1").src="img/imagine2.png"' onmouseout='document.getElementById("img1").src="img/imagine1.png"'><img id="img1" src="img/imagine1.png" alt="" /></a>
Simplu... si il folosesti individual unde vrei...

Deci ai butonul (a href-ul) cu o imagine in el, pe care il poti cosmetiza cum vrei din CSS, inclusiv acea imagine. Poti baga si un text intr-un span... deci practic il poti cosmetiza usor dupa nevoi.

Daca ai foarte multe butoane la care ai nevoie de a schimba imagini diferite pentru fiecare in parte atunci da, faci o functie JS, cu un loop daca e cazul, si atunci apelezi functia acolo unde ai nevoie... daca nu atunci asa e cel mai simplu. Dar cel mai ok este tot prima varianta, doar cu CSS.

Succes si spor!
__________________
Internetul e distractie, nu pierde controlul!


Foloseste Google si YouTube inainte de a pune intrebari stupide!
XVanish is offline   Reply With Quote
The Following User Says Thank You to XVanish For This Useful Post:
RaZeC (04.06.2011)
Old 04.06.2011, 17:41   #17
RaZeC
RPC Senior Member
 
RaZeC's Avatar
 
Join Date: 30.05.2011
Location: Constanta
Age: 27
Posts: 134
Thanks: 239
Thanked 48 Times in 36 Posts
Send a message via Yahoo to RaZeC Send a message via Skype™ to RaZeC
Default Re: Ma bate scriptul de image rollover!

Firefox
__________________
<font face=Times New Roman>The End More Than Justifies The Means</font>
RaZeC is offline   Reply With Quote
Old 06.06.2011, 15:19   #18
bogdan
RPC Super Moderator
 
bogdan's Avatar
 
Join Date: 26.06.2010
Posts: 5,349
Thanks: 5,862
Thanked 7,861 Times in 3,997 Posts
Default Re: Ma bate scriptul de image rollover!

Hmmm, ciudat ... Codul din post-ul #6 l-am incercat tot in firefox (HTTP User Agent: Mozilla/5.0 (X11; Linux i686 on x86_64; rv:2.0.1) Gecko/20100101 Firefox/4.0.1) si mergea OK.

Am crezut ca face parte dintr-un tutorial/curs de JS E un exemplu OK pentru invatat/modificat cod JS.

Oricum, pentru a face hover acum ai la dispozitie (si e in special recomandat !) CSS; aceeasi functionalitate in JS dateaza de prin anii '90 (cand nu se cazuse inca de acord asupra unui "standard" CSS si era o mare harababura la implementarea lui in browsere... ).
__________________
Imi place Romanian PC Forum - www.rpc-forum.ro!
bogdan is offline   Reply With Quote
The Following User Says Thank You to bogdan For This Useful Post:
RaZeC (07.06.2011)
Reply

Bookmarks


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
How to Clone a Hard Drive Using Acronis True Image 2010 Alin99 How To... 5 21.05.2012 17:30
Tutorial backup/restore - Acronis True Image XVanish How To... 0 03.09.2008 16:38
Ce bate Logitech Z-5500 in momentul de fata? XVanish Audio 2 09.06.2008 09:54

 
Advertisement




camere foto digitale

aparate foto digitale


Partner Links
Sabitech Media - dezvoltare web, servicii media

RSP Forum - sateliti.info
Comunitate Satelitara






All times are GMT +2. The time now is 04:04.


Powered by vBulletin® - © Jelsoft Enterprises Ltd.
~ Copyright © 2007-2015 Romanian PC Forum ~
Toate drepturile rezervate

Romanian Sattelites Provider Wi-Fi Magazin