[CSS] op mouseclick plaatje laten veranderen - Softwareontwikkeling

maandag 5 januari 2004 02:15

Acties:

Topicstarter

Wat is de beste manier om een plaatje te laten veranderen op een mouseclick?

Mijn uiteindelijke bedoeling is een site te maken, gebaseerd op CSS, die navigeerd m.b.v. imagemaps.
Dus dit is zeg maar het beginscherm:
Afbeeldingslocatie: http://www.plokk.com/files/voorbeeld1.gif

Afbeeldingslocatie: http://www.plokk.com/files/voorbeeld1.gif

Dan klik je op een van de links (m.b.v. een imagemap dus) voor:
Afbeeldingslocatie: http://www.plokk.com/files/voorbeeld2.gif

of

Afbeeldingslocatie: http://www.plokk.com/files/voorbeeld3.gif

Kan dat met CSS(2)?

Dus niet de bedoeling:

• Gebruik van "swapimage"
• Gebruik van Flash/actionscript
• Gebruik van DHTML
• Gebruik van Javascript/oid
• Gebruik van divjes

Moet:

• Cross-browser zijn
• W3C Compliant zijn
• Met CSS

INDEX

HTML:

<html>
<head>

<link rel="stylesheet" href="style.css" type="text/css">
</head>

<base>
<body>
[img]"menu.gif"[/img] 
[img]"base.gif"[/img]
<map name="nav">
  <area shape="rect" coords="60,160,240,200" href="#">
  <area shape="rect" coords="60,200,240,240" href="#">
  <area shape="rect" coords="60,240,240,280" href="#">
  <area shape="rect" coords="60,280,240,320" href="#">
  <area shape="rect" coords="60,320,240,360" href="#">
</map>

</html>

STYLE.CSS

Cascading Stylesheet:

body {
    background-color: #FFCC00
}

.menu {
    position:absolute;
    top:50px;
    left:50px;
}

.base {
    position:absolute;
    top:50px;
    left:310px;
}

Met google kwam ik op sites over CSS Image Rollovers, nog niet helemaal dus. Verder ging het over dHTML rollovers, en Javascripting..

Met de search kwam ik op dit topic over CSS hovers, maar kan dit ook op een mouseclick?
[rml][ XHTML CSS] Swap image effect[/rml]

[ Voor 15% gewijzigd door jazz op 05-01-2004 08:59 ]

maandag 5 januari 2004 02:53

Acties:

BetuweKees

Flipje uit Tiel

zonder divjes lijkt me beetje onmogelijk; voor zo ver ik weet zijn al die dingen gebaseerd op gochelen met layers, maar met php erbij moet je een eind kunnen komen denk ik.
zijn verschillende dingen over te vinden op web (kan juiste bookmark even niet vinden

), dus zou nog even je best doen met google. weet trouwens niet of je al in /13 bent geweest, maar daar worden dergelijke zaken ook regelmatig besproken..

[ Voor 1% gewijzigd door BetuweKees op 05-01-2004 02:54 . Reden: tikvout ]

Through meditation I program my heart to beat breakbeats and hum basslines on exhalation -Blackalicious || *BetuweKees was AFK; op de fiets richting China en verder

maandag 5 januari 2004 08:18

Acties:

pgussow

Wat heeft PHP ermee te maken? Voor zover ik de TS begrijp wil hij het client-side doen. En clientside heeft niet met PHP te maken. Het staat zelfs in het verkeerde forum, maar dat is iets voor de mods

ontopic:
Je weet waar CSS staat, right? Wat doe je met CSS? Je definieert de STYLE van bepaalde HTML elementen. Dus hoe een html-element gerepresenteerd moet worden. Eventueel op basis van attributen van het html-element.
Waar jij over praat is het veranderen van de display op basis van acties van een gebruiker. Dan praat je niet meer over statische content, maar over het dynamisch veranderen van content. Daar is CSS niet voor bedoeld. Mijns inziens moet je dus toch een JS oplossing maken hiervoor.

maandag 5 januari 2004 08:21

Acties:

André

Analytics dude

Je kunt met een css en behaviors ook een einde komen.

[rml][ css] meer css met htc voor IE[/rml]

[ Voor 15% gewijzigd door André op 05-01-2004 08:23 ]

maandag 5 januari 2004 08:35

Acties:

jazz

Topicstarter

André schreef op 05 januari 2004 @ 08:21:
Je kunt met een css en behaviors ook een einde komen.

[rml][ css] meer css met htc voor IE[/rml]

Ja André ik had het topic gezien, vreselijk interessant allemaal (had em al in de bookmarks)

, maar is er echt niets via CSS te versieren?

Inderdaad client-side, maar waar ik naar op zoek ben is een soort tegenhanger van a: hover}, dat deze het plaatje veranderd na het klikken op een link veranderd. Dus zeg maar een combinatie van javascript: onclick en css a: onhover.. Of is dit gewoonweg niet mogelijk?

Btw over verkeerde plaatsing heb ik t modje al gemaild, my bad

maandag 5 januari 2004 08:37

Acties:

crisp

Devver

Pixelated

jazz: ik kan je topic vanuit hier niet verplaatsen, maar wellicht is 1 van de P&W mods wel zo vriendelijk

Je hebt het over een soort van navigatie vanuit de imagemap mbv onclick; ik zou gewoon anchors definieeren voor die imagemap en een iframe gebruiken

Intentionally left blank

maandag 5 januari 2004 09:16

Acties:

whoami

Clientside stuff (HTML, Javascript, CSS, ...) hoort niet thuis in P&W, maar in W&G. (Zie ook de forumdescriptions)

-> W&G

https://fgheysels.github.io/

maandag 5 januari 2004 09:23

Acties:

Verwijderd

Alhoewel ik er niet de grootste fan ben: http://alistapart.com/articles/imagemap/
Grote fan van: http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/

Combineer die twee en klaar, of niet?