«
»

CSS rollover ეფექტი JavaScript – ის გარეშე

Mar 12 2007

rollover ეფექტი ვებ საიტებისა თუ ვებ აპლიკაციების დიზაინში ხშირად გამოყენებადი ელემენტია. განსაკუთრებით ხშირად იგი გამოიყენება ნავიგაციის მენიუებში, თუმცა არც სხვა შემთხვევები წარმოადგენს გამონაკლისს. წლების წინ როდესაც CSS – ის მხარდაჭერა არასრულყოფილად იყო რეალიზებული ბროუზერებში ამ ეფექტის მიღწევის ერთადერთი გზა იყო JavaScript.

თავისთავად rollover ეფექტი სხვადასხვანაირად შეგვიძლია გამოვიყენოთ, რიგ შემთხვევებში შეიძლება HTML ელემენტებს მაუსის ისრის მიტანის დროს შევუცვალოთ ფონის სურათი, ან საერთოდ არ გამოვიყენოთ სურათები და უბრალოდ შევუცვალოთ ფონი. მაგრამ არსებობს ისეთი შემთხვევები როდესაც მხოლოდ ფონის შეცვლა არ კმარა, ზოგჯერ შეიძლება ბევრად მეტი ცვლილების განხორციელება იყოს საჭირო, მაგალითად ტექსტის ფერის შეცვლა, ელემენტის გვერდების ზომისა და ფერის შეცვლა, ელემენტს შიგნით არსებული სხვა ელემენტების გამოჩენა და ა.შ.

გამომდინარე აღწერილი შემთხვევებიდან ერთის მხრივ თუ ამ ცვლილებების დიდ ნაწილს განვახორციელებთ სურათების მეშვეობით, მოგვიწევს უკეთეს შემთხვევაში ორი სურათის შექმნა, უარეს შემთხვევაში კი ორზე მეტი სურათიც კი შეიძლება დაგვჭირდეს. ამასთან ერთად რაც უფრო რთული ცვლილებების გაკეთება ხდება საჭირო მითუ უფრო მეტი JavaScript კოდის წერაა საჭირო, რაც თავის მხრივ არ არის ეფექტური გამოსავალი.

ქვემოთ ნაჩვენები მარტივი მენიუ მთლიანად გაკეთებულია CSS და XHTML კოდის მეშვეობით და იგი არ იყენებს JavaScript – ს.

ამ მარტივ მაგალითში მენიუს რომელიმე ელემენტზე მაუსის ისრის მიტანის დროს ხდება რამდენიმე ცვლილება:

  1. იცვლება ელემენტის ფონის ფერი
  2. იცვლება ტექსტის ფერი
  3. იცვლება მარჯვენა გვერდის ფერი

მენიუს HTML კოდი შედგება სულ რამდენიმე სტრიქონისგან:

1
2
3
4
5
6
7
<div id="menu">
  <ul>
    <li><a href="#">Item One</a></li>
    <li><a href="#">Item Two</a></li>
    <li><a href="#">Item Three</a></li>
  </ul>
</div>

კოდიდან ცხადად ჩანს რომ მასში არ არის გამოყენებული არც ერთი მოვლენა (event), JavaScript – ით იგივე ეფექტის მიღების შემთხვევაში ყველა a ელემენტისთვის საჭირო იქნებოდა onmouseover და onmouseout მოვლენების გამოყენება. ამ შემთხვევაში კი ყველა ცვლილება ხორციელდება მხოლოდ CSS კოდით რომელიც ნაჩვენებია ქვემოთ.

მენიუს CSS კოდს აქვს შემდეგი სახე:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#menu ul {
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}
#menu a {
  display: block;
  width: 150px;
  background-color: lightblue;
  color: blue;
  border-bottom: 1px solid gray;
  border-right: 5px solid silver;
  text-decoration: none;
  padding: 2px;
}
#menu a:hover {
  background-color: pink;
  border-right: 5px solid orange;
  color: red;
}

მოცემულ მაგალითში სასურველი ეფექტის მისაღწევად გამოიყენება a ელემენტის hover ფსევდო კლასი, რომელიც გვაძლევს იმის საშუალებას რომ menu იდენტიფიკატორის მქონე div ელემენტის შიგნით არსებულ ყველა a ელემენტზე მაუსის ისრის მიტანის დროს განვახორციელოთ სხვადასხვა ცვლილება. ამ შემთხვევაში როგოც ზემოთ იყო აღნიშნული იცვლება მხოლოდ ფონი, მარჯვენა გვერდის ფერი და ტექსტის ფერი.

ამ მარტივი მაგალითიდან ცხადია რომ hover ფსევდო კლასის გამოყენებით შესაძლებელია უამრავი სხვა ცვლილების განხორციელება საჭიროების მიხედვით. მაგალითად გარდა მხოლოდ ფონის ფერის ცვლილებისა თავისუფლად არის შესაძლებელი რომ ელემენტს შევუცვალოთ არა მხოლოდ ფერი არამედ მას შევუცვალოთ ფონის სურათი, რაც მიიღება იგივე კოდის მარტივი მოდიფიცირებით:

1
2
3
4
5
6
#menu a:hover {
  background-image: url("hoverimage.gif");
        background-repeat: no-repeat;
  border-right: 5px solid orange;
  color: red;
}

ასეთ შემთხვევაში (იგულისხმება რომ სურათი სახელად hoverimage.gif არსებობს) ელემენტს მიენიჭება ახალი ფონის სურათი… თუმცა ეს არ არის ყველაფერი, მაგალითად წარმოვიდგინოთ შემთხვევა როდესაც მენიუს ელემენტზე მაუსის ისრის მიტანის დროს უნდა გამოჩნდეს რაიმე დამალული ელემენტი როგორც ნაჩვენებია შემდეგ მაგალითში:

ამ მაგალითში გარდა ზემოთ ჩამოთვლილი ცვლილებებისა დაემატა კიდევ ერთი, ელემენტზე ისრის მიტანისას ჩნდება მწვანე ფერის ტექსტი.

როგორ მიიღწევა ეს ეფექტი? პირველ რიგში მცირე ცვლილება HTML კოდში:

1
2
3
4
5
6
7
<div id="menu">
  <ul>
    <li><a href="#">Item One<span>&nbsp;Info One</span></a></li>
    <li><a href="#">Item Two<span>&nbsp;Info Two</span></a></li>
    <li><a href="#">Item Three<span>&nbsp;Info Three</span></a></li>
  </ul>
</div>

მენიუს ყოველ ელემენტს a ტეგს შიგნით დავამატეთ span ტეგი შესაბამისი ტექსტით, რომელიც მენიუს ელემენტზე ისრის მიტანის დროს გამოჩნდება.

ასევე მცირე ცვლილება განხორციელდა CSS კოდში, მას დაემატა შემდეგი დირექტივები:

1
2
3
4
5
6
7
8
9
#menu a span {
  display: none;
}

#menu a:hover span {
  display: inline;
  font-weight: bold;
  color: green;
}

განვიხილოთ თითოეული მათგანი.

#menu a span – ის მეშვეობით უბრალოდ ვმალავთ a ელემენტების შიგნით არსებულ span ტეგებს.

#menu a:hover span – ის მეშვეობით კი პირიქით, ვაჩენთ span ტეგს CSS display თვისების მეშვეობით.

ისევე როგორც პირველ მაგალითში ამ შემთხვევაშიც ყველაფერი განხორციელდა CSS – ის მეშვეობით. თუ ზემოთ მოცემულ CSS კოდს დავამატებთ შემდეგ დირექტივას:

1
2
3
4
#menu ul li {
        display: inline-block;
        float: left;
}

ვერტიკალურის ნაცვლად მივიღებთ ჰორიზონტალურ მენიუს.

ტეგები: ,

10 Responses to “CSS rollover ეფექტი JavaScript – ის გარეშე”

  1. სოსანა says:
    March 14, 2007 at 5:33 am

    GREAT WORK! :)

  2. სოსანა says:
    March 14, 2007 at 5:46 am

    P.S.
    ეჰ, რა დრო იყო…

  3. იოსები says:
    March 14, 2007 at 5:54 am

    აბა შენ ეგა თქვი… ტიტანების ეპოქა HyperQuality, Cingular, Trial Giant :) კარგი იყო კარგი მაგრამ ეხლა უკეთესია ;)

  4. სოსანა says:
    March 14, 2007 at 6:20 am

    აჰა ;)

  5. ალეკო205 says:
    December 11, 2007 at 12:47 am

    გაუმარჯოს იოსებ. სოსჯან მაქვს ესეთი რაღაცა

    და სტილი
    #contactImg{
    border:solid 1px white
    }
    #contactImg:hover{
    border:solid 1px red
    }
    და IE7-ში ვერ ვამუშავებ, ხო ვერ მეტყვი რატო?

  6. ალეკო205 says:
    December 11, 2007 at 12:48 am

    აუ ის გამიქრო რაღაცა მაქვს თქო

    1
     

    აი ესა მაქვს

  7. ალეკო205 says:
    December 11, 2007 at 12:49 am

    ეეეეეე წაშალე რა ეს უაზრო პოსტები რომ დაიწერა აი ესა მაქვს

    1
     
  8. ალეკო205 says:
    December 11, 2007 at 12:51 am

    :( :( :( ვერ ვწერ იტოგში იმგ მაქვს id ააქვს contactImg

  9. იოსები says:
    December 11, 2007 at 2:13 am

    ალეკო, ფსევდო სელექტორი :hover IE – ში არ მუშაობს იმიჯ ტეგისთვის :( ეგ სურათი A ტეგში ჩასვი და ისე გააკეთე :) სხვა გამოსავალი ნამდვილად არ ვიცი CSS – ში :)

    P.S.

    code ტეგის ნაცვლად pre ტეგი გამოიყენე ხოლმე კოდის ბლოკის დასაწერად.

  10. ალეკო205 says:
    December 11, 2007 at 3:05 am

    მადლობა :)

დატოვე კომენტარი:

ქართული კლავიატურა, ჩართვა/გამორთვა კლავიშით "~"