animierte buttons im div layer für myspace

Konstrukt · 23.07.2009

hallo zusammen,

ich habe mit photoshop ein divlayer für meine myspaceseite erstellt und dieses eingebunden. (Klick)

jetzt würde ich die buttons gerne animiert haben, genauer möchte ich, dass sich die schrifft aufhellt, wenn man mit der maus darüber geht. zu diesem zweck habe ich alle slices, die als buttons fungieren nochmals ohne dem darüber liegenden farbverlauf gespeichert. weiter komme ich nur leider nicht.

ich würde mich tierisch freuen, wenn mir jemand weiterhelfen könnte.
vielleicht kann mir ja jemand am beispiel eines buttons erklären, wie es funktioniert. zum beispiel der "add"-button:

folgendes wird von dem von photoshop generierten code in den css code für die "über mich"-sektion eingefügt:

<table id="Tabelle_01" width="801" height="504" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">
<a href="http://friends.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendId=67342113">
<img src="http://i64.photobucket.com/albums/h163/M0N60/myspacediv/Add.jpg" width="45" height="19" border="0" alt=""></a></td>
</tr>

das sind die grafiken:

geht das überhaupt? oder müsste ich ganz anders an die sache rangehen.
herausgefunden habe ich schon, dass ich auch flashbuttons statt des bildes einfügen könnte, aber wenn es geht würde ich gerne auf flash verzichten.

edit sagt noch: mir fiel gerade auf, dass mein problem inzwischen dummerweise mehr mit webdesign, als mit photoshop zu tun hat. deshalb vermute ich mal, dass ich damit im falschen bereich bin. wäre einer der mods vielleicht so nett meinen thread in den html/css bereich zu verschieben. sorry

Wraith · 23.07.2009

AW: animierte buttons im div layer für myspace

Mmh.. irgendwie sehe ich in dem Code kein css

Wenn du die buttons verlinkst über das <a href=""> müsste es reichen wenn du ihm dann im css ein a:hover gibst das das gewünschte Bild zum Mouseover enthält.

Auch hier mal nachlesen könnte dir helfen: :hover: Mouseover-Effekt: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

korrigiert mich bitte wenn ich da falsch liege bin leider auch nichtmehr ganz so fitt in css

Grüßle Wraith

DaTrautinger · 23.07.2009

AW: animierte buttons im div layer für myspace

Tut mir leid - in Deinem Programm kenne ich mich nicht aus. Aber bei gibt es da die Einstellungen: Mouse away, Mouse over, Mouse down, Mouse up, Show, Hide! Und für jeden Zustand kann ich mir dan ein entsprechendes Bild für den Button basteln. Aber das Prinzip dürfte in allen Programmen gleich sein. Gruß DaTrautinger

seecretum · 23.07.2009

AW: animierte buttons im div layer für myspace

ehm css bei Buttons? Also ich nehm da Javascript... der hover ist glaub nur für Links gedacht...

Konstrukt · 23.07.2009

AW: animierte buttons im div layer für myspace

Wraith schrieb:
Mmh.. irgendwie sehe ich in dem Code kein css

das von mir gepostete ist auch nur der html-code, der von photoshop erstellt wird, wenn man ein in slices aufgeteiltes bild als website abspeichert.

so siehts mit css aus:

<div class="bg"
style="position: absolute;
left:350;
top:185px;
width:801px;
height:504px;
overflow: inherit;">
<center>

<table id="Tabelle_01" width="801" height="504" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">
<a href="http://friends.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&frien dId=67342113">
<img src="http://i64.photobucket.com/albums/h163/M0N60/myspacediv/Add.jpg" width="45" height="19" border="0" alt=""></a></td>
</tr>

</table>
</div>

Ich fand noch dieses tutorial. mir fällt es aber schwer diese variante in den bereits bestehenden code mit einzubeziehen.

seecretum schrieb:
ehm css bei Buttons? Also ich nehm da Javascript... der hover ist glaub nur für Links gedacht...

das sehen einige so wie du, aber es geht. (siehe link oben) nur weiß ich halt nicht, wie ich dass mit dem was ich schon habe kombiniere. ist halt auch noch nicht mein fachgebiet

Wraith · 23.07.2009

AW: animierte buttons im div layer für myspace

<head>
<style type="text/css">

a.buttonhover {
display:block;
width:80px;
height:30px;
}

a.buttonhover {
display:block;
width:80px;
height:30px;
background:transparent url( Bild normal) no-repeat top left;
}

a.buttonhover:hover {
display:block;
width:80px;
height:30px;
background:transparent url( bild mouseover) no-repeat bottom left;
}

</style>
</head>
<body>
<div class="bg"
style="position: absolute;
left:350;
top:185px;
width:801px;
height:504px;
overflow: inherit;">
<center>

<table id="Tabelle_01" width="801" height="504" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">
<a class="buttonhover" href="http://friends.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&frien dId=67342113">


</a></td>
</tr>

</table>
</div>

</center>
</body>

So sollte es klappen

Konstrukt · 24.07.2009

AW: animierte buttons im div layer für myspace

hey, vielen dank für den code.
ich habe es eingesetzt und es hat funktioniert.
musste nur noch bei der positionierung des "normalen" bildes das top left zu bottom left ändern und dann war alles an der richtigen stelle.

die fläche des buttons hast du ja im css mit 80 x 30 festgelegt (ich nehme an aus dem tutorial). müsste sie nicht identisch mit der grafik sein, also 45 x 19?

und eine zweite frage: ich habe ja ein paar mehr links, müsste ich für den nächsten button zum beispiel "b.buttonhover" benutzen?

edit: die zweite frage hat sich erledigt! ich weiß zwar immer noch nicht welche funktion dieses "a" von "a.buttonhover" und "<a class=..." hat (wär nett, wenn mir das noch jemand sagen könnte

), aber ich weiß jetzt, dass buttonhover nur der name war. also hab ich dem nächsten button einfach den namen "button2hover" gegeben. super.

sokie · 24.07.2009

AW: animierte buttons im div layer für myspace

Wraith schrieb:
a.buttonhover {
display:block;
width:80px;
height:30px;
}

a.buttonhover {
display:block;
width:80px;
height:30px;
background:transparent url( Bild normal) no-repeat top left;
}

warum für einen selektor zwei Definitionen?

Hallo Konstrukt,
das a steht HTML Elementedie einen Verweis darstellen ()

mit dem Punkt dahinter wird die klasse(class) angegeben für die die Formatierung, die in den geschweiften Klammern steht gilt.
zB.:

Code:

a.buttonhover{
/* alles was in diesem Bereich steht formatiert
  ausschliesslich <a> elemente mit der class="buttonhover" */
}

also hab ich dem nächsten button einfach den namen "button2hover" gegeben

wenn es in der css keine formatierungen für .button2hover gibt, ist das so wirkungslos,als würdest du da garkeine class angeben.

Konstrukt · 24.07.2009

AW: animierte buttons im div layer für myspace

vielen dank für die erläuterung zum uminösen A.

natürlich habe ich jedem "class" verweis einen eigenen css part erstellt.

es hat alles funktioniert. (klick mich)

ich werde aber diese taktik (klick mich) nochmal ausprobieren, da es doch schon einen moment dauert, bis die markierten buttons von photobucket geladen werden.

Wraith · 26.07.2009

AW: animierte buttons im div layer für myspace

@Sokie, da hast du recht, habs einfach aus dem Tutorial kopiert.

@Konstrukt, freut mich das ich dir mit den anderen zusammen helfen konnte

Konstrukt · 05.08.2009

AW: animierte buttons im div layer für myspace

so.
jetzt hab ich die buttons so hinbekommen, dass nicht mehr nachgeladen werden muss.
es muss nur noch der player in den vordergrund und dann bin ich fertig.
danke nochmal für die hilfe.

Konstrukt · 06.08.2009

AW: animierte buttons im div layer für myspace

ich bitte im voraus um entschuldigung für den doppelpost.
da erneut ein problem aufgetaucht ist, wollte ich den thread aber nochmals pushen.

ich habe den player mit folgendem code über meinem div-layer positioniert.

<style>
.a {position mini player anywhere}
embed, object {position:absolute; left:50%; top:430px; margin-left:-10px; z-index:9;}
td td td embed, td td td object {position:static; margin-left:0px;}
</style>

dummerweise funktioniert das aber nur im firefox.
im internetexplorer wird er hingegen garnicht angezeigt.
ich habe keinen internetexplorer installiert, sondern benutze
ein firefox add-on (IE Tab). könnte es daran liegen?