| Autor |
Nachricht |
-
atlantis-photography
|
 08.01.2012 um 10:59 (UTC)
Titel: "nervöser" Mousover |
|
|
hallo,
ich hatte kürzlich schon mal ne Frage zum mousover,leider ist der beitrag schon geschlossen.
http://www.homepage-baukasten.de/forum/viewtopic.php?t=135021&highlight=
Der Mouseover funktioniert,nur habe ich jetzt das problem das die seite sehr nervös wirkt.
http://www.vita-imago.de/test-2.htm
gibt es eine Möglichkeit einer zeitverzögerten öffnung der bilder? also das man zum beispiel die maus erst 1 sekunde auf dem vorschaubild halten muss bevor es sich öffnet?
mfg Frank ______________  |
|
|
↑
|
|
 |
|
|
|
|
↑
|
|
|
-
atlantis-photography
|
09.01.2012 um 23:02 (UTC)
Titel: |
|
|
timeout....ist das im forum irgendwo beschrieben wie das geht?mein mousover ist ja eigentlich n Hoover.
mfg Frank ______________ |
|
|
↑
|
|
|
|
|
11.01.2012 um 00:07 (UTC)
Titel: |
|
|
Mouseover und hover läuft auf das gleiche raus. Mir fällt aber gerade noch eine bessere Methode ein. Mit CSS 3 gibt es die transition Eigenschaft, damit kannst du bewirken, dass sich dein Bild langsam aufbaut.
Das Problem daran ist, dass der IE diese Eigenschaft erst ab Version 10 kennt bzw. kennen wird.
Deinen Bildern weist du als erstes eine Klasse zu:
Zitat: <img src="URL des Bildes" alt="Alternativ text" class="transition">
In deinem CSS Code, definierst du dann für die Bilder die transition Eigenschaft. Um Cross Browser kompatibel zu bleiben nutzt du auch die Browser spezifischen Präfixe aus:
Zitat: img.transition {
-moz-transition:width linear 2s, height linear 2s;
-webkit-transition:width linear 2s, height linear 2s;
-khtml-transition:width linear 2s, height linear 2s;
-o-transition:width linear 2s, height linear 2s;
-ms-transition:width linear 2s, height linear 2s;
transition:width linear 2s, height linear 2s;
width:XXpx;
height:XXpx;
}
img.transition:hover {
width:XXpx;
height:XXpx;
}
Breite normal
Höhe normal
Breite beim Hover
Höhe beim Hover______________ mfg
o-4-n
"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]
*** Die Suchfunktion ist KEINE tödliche Krankheit! ***
Eventplanung, Equipment, Zeltverleih, Catering
Zuletzt bearbeitet von o-4-n am 11.01.2012, 01:13, insgesamt 2-mal bearbeitet
|
|
|
↑
|
|
|
-
atlantis-photography
|
11.01.2012 um 10:31 (UTC)
Titel: |
|
|
danke für deine bemühungen aber es funktioniert bei mir leider nicht.
IE ist klar weil ich den 10er nicht habe aber auch beim mozilla gehts nicht.
wäre auch schlecht für meine seitenbesucher weil ich nicht davon ausgehen kann das alle aktuelle browser benutzen.
wie geht das mit dem timeout?würd ich gern probieren.
mfg frank ______________ |
|
|
↑
|
|
|
|
|
11.01.2012 um 13:43 (UTC)
Titel: |
|
|
Wenn es im FF nicht geht, hast du etwas falsch gemacht. 
Als erste schreibst du dir eine Funktion, die den gewünschten hovereffekt erzeugt. Willst du Höhe und Breite ändern, dann musst du das in dieser Funktion machen.
In deinem imagetag nutzt du dann die DOM-Methode setTimeout und rufst obige Funktion mit der gewünschten verzögerung auf:
Zitat: <img src="URL zum Bild" alt="Alternativtext" onmouseover="setTimeout(nameDerFunktion, 2000);" onmouseoutr="setTimeout(nameDerFunktion, 2000);">
Referenz der Funktion (Name der Funktion ohne() ).
Verzögerung in millisekunden, hier also 2 Sekunden
Auch hier kannst du es soProgrammieren, dass sich das Bild langsam aufbaut. Dazu setzt du den Timeout innerhalb der Funktion und vergrößerst das Bild mit jedem Aufruf um einige Pixel. ______________ mfg
o-4-n
"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]
*** Die Suchfunktion ist KEINE tödliche Krankheit! ***
Eventplanung, Equipment, Zeltverleih, Catering |
|
|
↑
|
|
|
-
atlantis-photography
|
15.01.2012 um 18:27 (UTC)
Titel: |
|
|
ich bekomms einfach nicht hin..bin zu doof für sowas... ______________ |
|
|
↑
|
|
|
|
|
|
|
↑
|
|
|
-
atlantis-photography
|
16.01.2012 um 18:30 (UTC)
Titel: |
|
|
naja,was soll ich sagen...mein wissen ist recht "überschaubar"...
genau genommen arbeite ich immer nach dem "Versuch und Irrtum Prinzip"was bisher eigentlich immer nach ein paar Bastelstunden irgendwie zum erfolg führte.
nur hierbei steh ich eben total auf dem schlauch..
also..versuchen wirs mal zu entwirren..?
in meinem "Text über dem Design" steht
img.a1 { height:150px; width:100px; }
img.a1:hover { height:auto; width:auto; }
img.a2 { height:100px; width:150px; }
img.a2:hover { height:auto; width:auto; }
und auf der Seite selbst zum beispiel
<img class="a1" alt="" width="100" height="150" src="http://img.webme.com/pic/a/atlantis-photography/dsc_3705.jpg" />
wenn ich deinen script
<img src="URL zum Bild" alt="Alternativtext" onmouseover="setTimeout(nameDerFunktion, 2000);" onmouseoutr="setTimeout(nameDerFunktion, 2000);">
richtig interpretiere müßte ich das was ich im "Text über dem Design" zu einer Funktion zusammenfassen und benennen?..und anstelle meines (((<img class="a1" alt="" width="100" height="150" src="http://img.webme.com/pic/a/atlantis-photography/dsc_3705.jpg" /> ))) einfügen
mfg frank ______________
Zuletzt bearbeitet von atlantis-photography am 16.01.2012, 19:32, insgesamt einmal bearbeitet
|
|
|
↑
|
|
|
|
|
|
|
↑
|
|
|
-
atlantis-photography
|
17.01.2012 um 18:52 (UTC)
Titel: |
|
|
na toll.....support gibt auf..spitze ______________ |
|
|
↑
|
|
|
|
|
17.01.2012 um 23:41 (UTC)
Titel: |
|
|
Naja, als aufgeben würde ich das nicht bezeichnen, eher als realistisch sein. Dir fehlen einfach gewisse Grundlagen um das umsetzen zu können. Hier mal meine Lösung, die du noch für dich anpassen musst (Ich glaube dann verstehst du, was ich mit realistisch sein meine). Ich habe es etwas Objekt orientierter gemacht:
Zitat: <script type="text/javascript">
var steps = 25;
var minWidth = XX;
var minHeight = XX;
var i, temp, temp2;
temp = document.getElementsByTagName('img');
for(i = 0; i < temp.length; i++) {
if(temp[i].className && temp[i].className == 'o4nimagesizechanger'){
temp2 = new Image();
temp2.src = temp[i].src;
temp[i].acWidth = minWidth;
temp[i].maxWidth = temp2.width;
temp[i].acHeight = minHeight;
temp[i].maxHeight = temp2.height;
temp[i].timeOut = null;
temp[i].makeItBigger = function () {
var obj = this;
if(this.timeOut)
window.clearTimeout(this.timeOut);
((this.acWidth + steps) < this.maxWidth) ? this.acWidth += steps : this.acWidth += (this.maxWidth - this.acWidth);
this.style.width = this.acWidth + 'px';
((this.acHeight + steps) < this.maxHeight) ? this.acHeight += steps : this.acHeight += (this.maxHeight - this.acHeight);
this.style.height = this.acHeight + 'px';
if((this.acHeight < this.maxHeight) || (this.acWidth < this.maxWidth))
this.timeOut = window.setTimeout(function(){obj.makeItBigger();}, 200);
};
temp[i].makeItSmaller = function () {
var obj = this;
if(this.timeOut)
window.clearTimeout(this.timeOut);
((this.acWidth - steps) > minWidth) ? this.acWidth -= steps : this.acWidth -= (this.acWidth - minWidth);
this.style.width = this.acWidth + 'px';
((this.acHeight - steps) > minHeight) ? this.acHeight -= steps : this.acHeight -= (this.acHeight - minHeight);
this.style.height = this.acHeight + 'px';
if((this.acHeight > minHeight) || (this.acWidth > minWidth))
this.timeOut = window.setTimeout(function(){obj.makeItSmaller();}, 200);
};
temp[i].onmouseover = temp[i].makeItBigger;
temp[i].onmouseout = temp[i].makeItSmaller;
}
}
</script>
Schrittweite in Pixel (alle 200 ms wird das Bild um diese Anzahl an Pixel vergrößert hier also um 25 Pixel)
Breite des kleinen Bildes
Höhe des kleinen Bildes
Die Bilder müssen zu der Klasse "o4nimagesizechanger" gehören. ______________ mfg
o-4-n
"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]
*** Die Suchfunktion ist KEINE tödliche Krankheit! ***
Eventplanung, Equipment, Zeltverleih, Catering
Zuletzt bearbeitet von o-4-n am 18.01.2012, 01:30, insgesamt 6-mal bearbeitet
|
|
|
↑
|
|
|
-
atlantis-photography
|
18.01.2012 um 20:03 (UTC)
Titel: |
|
|
danke dafür!deshalb din ich eben fotodesigner und du webdesigner..!aber ich bemühe mich und es funktioniert sogar.für hoch-und querformat muss ich das sicher getrennt machen,oder?
mfg Frank ______________ |
|
|
↑
|
|
|
|
|
18.01.2012 um 23:04 (UTC)
Titel: |
|
|
atlantis-photography hat Folgendes geschrieben: aber ich bemühe mich
Das habe ich gemerkt, sonst hätte ich es dir nicht gemacht. 
atlantis-photography hat Folgendes geschrieben: für hoch-und querformat muss ich das sicher getrennt machen,oder?
Kannst du mir erklären, wie du das meinst? Die Breite und Höhe des Bildes wird automatisch ausgelesen. ______________ mfg
o-4-n
"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]
*** Die Suchfunktion ist KEINE tödliche Krankheit! ***
Eventplanung, Equipment, Zeltverleih, Catering |
|
|
↑
|
|
|
-
atlantis-photography
|
19.01.2012 um 16:36 (UTC)
Titel: |
|
|
ja,sdas ist richtig.sorry,ich hab mich etwas unglücklich ausgedrückt.
was ich meine sind die "vorschaubilder".
ausgegangen wird jeweils von der minimalen höhe und der minimalen breite.was dazu führt, das nach aktivieren des bildes dieses auf das min. Maß zurückgeht und die vorschaubilder dann quadratisch sind.iche denke das liegt daran,das ein querformatiges vorschaubild eine min.höhe von 100px hat und ein hochformatiges eine min.breite von 100px.
aber ich denke damit kann ich leben.habe die vorschaubilder jetzt generell auf 100x100 festgelegt.
die Bildauswahl ist aber immer noch schwierig...
mfg ______________
Zuletzt bearbeitet von atlantis-photography am 21.01.2012, 13:23, insgesamt 2-mal bearbeitet
|
|
|
↑
|
|
|
|
