| Autor |
Nachricht |
Smooth-Graphics
Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Di 17.02.2009 00:27
Titel
|
  |
|
Ach quark.
Du gibst jedem Bild-div einen Background-color: #000;
Und dann sagst du einfach, dass der Div:hover einen border: solid 1em #902932; bekommt
und die restlichen divs:
div.thumbnails:hover div.thumbnails{
opacity: 0.6;
}
wobei du vllt noch ein :active selektieren musst. Nimm ma choises und meine Tipps und erarbeit dir das so 
|
|
| |
   |
 |
l3mon
Dabei seit: 26.07.2005
Ort: -5m
Alter: 58
Geschlecht:
|
Verfasst Di 17.02.2009 10:11
Titel Re: Bild heller werden lassen |
|
|
| domdesignonline hat geschrieben: | ....
Ich hätte es gerne irgendwie verwirklicht, dass meine Bilder alle etwas dunkler sind und beim überfahren, wird das ausgewählte dann hell.
... |
einfach beim hover das hintergrundbild via css austauschen? 
|
|
| |
|
|
|
Anzeige
|
|
|
Pixelpole
Dabei seit: 25.10.2004
Ort: Trier
Alter: 37
Geschlecht:
|
Verfasst Di 17.02.2009 10:53
Titel
|
|
|
hoverbild?! css sprites?! 
quick 'n' dirty mit jquery:
| Code: |
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
$("#img_container img").mouseover(function() {
$("#img_container img").css('opacity', 0.2);
$(this).css('opacity', 1);
});
$("#img_container img").mouseout(function() {
$("#img_container img").css('opacity', 1);
});
});
-->
</script>
</head>
<body style="background-color:#191919">
<div id="img_container">
<img src="023.jpg" />
<img src="031.jpg" />
<img src="034.jpg" />
</div>
</body>
</html>
|
//ach ja: border regelt man dann direkt über css oder so:
| Code: |
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
$("#img_container img").mouseover(function() {
$("#img_container img").css('opacity', 0.2);
$(this).css('opacity', 1);
$(this).css('border', '5px solid #00CCCC');
});
$("#img_container img").mouseout(function() {
$("#img_container img").css('opacity', 1);
$(this).css('border', 'none');
});
});
-->
</script>
</head>
<body style="background-color:#191919">
<div id="img_container">
<img src="023.jpg" />
<img src="031.jpg" />
<img src="034.jpg" />
</div>
</body>
</html>
|
wie gesagt quick n dirty, braucht alles noch feintuning.
Zuletzt bearbeitet von Pixelpole am Di 17.02.2009 10:58, insgesamt 1-mal bearbeitet
|
|
| |
|
|
choise
Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht:
|
Verfasst Di 17.02.2009 10:58
Titel
|
|
|
| Pixelpole hat geschrieben: | hoverbild?! css sprites?!
quick 'n' dirty mit jquery: |
schön und gut, aber er will doch ohne js.
|
|
| |
|
|
Pixelpole
Dabei seit: 25.10.2004
Ort: Trier
Alter: 37
Geschlecht:
|
Verfasst Di 17.02.2009 11:01
Titel
|
|
|
nö, hat er nie gesagt 
er sucht nur ne einfache lösung. und die ist einfach. alle bilder die das betreffen soll in einen container rein und fertig.
denke es gibt keine saubere css lösung bei der geschichte.
Ohne JS bleiben einfach alle Bilder hell und das sollte als Fallback eigentlich reichen.
|
|
| |
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 17.02.2009 11:52
Titel
|
|
|
| Pixelpole hat geschrieben: | | denke es gibt keine saubere css lösung bei der geschichte. |
Für moderne Browser überhaupt kein Problem
| Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="de" lang="de">
<head>
<title>hover shit</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div#thumbnails {
width: 600px;
}
div.item {
background: #000;
border: 5px solid #fff;
float: left;
height: 100px;
width: 140px;
}
div#thumbnails:hover div.item {
opacity: 0.5;
}
div#thumbnails div.item:hover {
border-color: #f00;
opacity: 1;
}
</style>
</head>
<body>
<div id="thumbnails">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html> |
IE6 ist halt raus, aber für den Fall könnte man dann zusätzlich Javascript einsetzen.
Zuletzt bearbeitet von m am Di 17.02.2009 11:55, insgesamt 1-mal bearbeitet
|
|
| |
|
|
Smooth-Graphics
Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 17.02.2009 17:07
Titel
|
|
|
|
Eben. Außerdem muss man nicht noch evtl. jQuery komplett mit einbinden?
|
|
| |
|
|
JIMMANN
Dabei seit: 07.08.2018
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 07.08.2018 09:45
Titel
|
|
|
| Smooth-Graphics hat geschrieben: | Ach quark.
Du gibst jedem Bild-div einen Background-color: #000;
Und dann sagst du einfach, dass der Div:hover einen border: solid 1em #902932; bekommt
und die restlichen divs:
div.thumbnails:hover div.thumbnails{
opacity: 0.6;
}
wobei du vllt noch ein :active selektieren musst. Nimm ma choises und meine Tipps und erarbeit dir das so |
Jedoch können Sie einfach Kontrast richtig einstellen, wenn Sie professionelle Software wie Photoshop oder Bildverkleinerer verwenden.
Edit: Linkspam entfernt. m
Zuletzt bearbeitet von m am Di 07.08.2018 10:00, insgesamt 1-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Heller Rand um Schnittmaske...?
Bild auf Webseite per Drag&Drop mit lokalem Bild ersetzen?
CSS - Hover / Link / Bild - Bild verschwindet nach Klick
[Frage] Verlinkung in ein Bild nicht auf ein Bild?
Bild hinter Bild in Photoshop
Bild-für-Bild-Animation in Flash MX
|
|
Willkommen auf dem Portal für Mediengestalter
