Søg
Avatar billede Tony Juniormester
29. januar 2006 - 12:32 Der er 16 kommentarer og
1 løsning

Image rollover med 3 billeder - det driller

Jeg har en rollover på et videopanel, men jeg har problemer med at holde fast i en given knaps position, når bruger har klikket på den: http://www.videomedia.dk/test/buttons_panel/test.html

På startknappen til venstre går det fint med onMouseOver og med onMouseOut, men med OnClick går det ikke så godt. Det er som om funktionen ikke kan 'se' at src er 'playClick.gif' og derfor ikke skal eksekveres.

Hvad gør jeg mon forkert?

P.s. De øvrige to knapper virker ikke p.t.
Avatar billede johan.o Nybegynder
29. januar 2006 - 13:18 #1
Hm, jeg syntes da knappen gør præcis som du beder den om.

Ved mouseOver skiftes til 'playOver.gif'
Ved mouseOut skiftes til 'playOut.gif'
Ved mouseClick skiftes til 'playClick.gif'

Dog tror jeg at det du gerne vil have er at 'knappen' returnere til 'playOver.gif' når man slipper sin onclick event...derfor.....

onMouseOver og onMouseOut er fine :)

Men istedet for onClick så lav en der hedder onMouseDown som skifter til 'playClick.gif' og en der hedder onMouseUp som skifter til 'playOver.gif'

Mvh. Johan
Avatar billede Tony Juniormester
29. januar 2006 - 13:28 #2
Hej Johan - tak :-)

Jeg har nok ikke udtrykt mig klart nok. Når bruger har klikket på knappen skal onMouseOut ikke virke. D.v.s. knappen skal forblive nedtrykket.
Avatar billede johan.o Nybegynder
29. januar 2006 - 22:57 #3
Ja, okay det lyder jo ogsp logisk nok. Prøv at skifte disse linjer ud :

function playOn(i){
if(i.src.substr(i.src.lastIndexOf("/")+1)!='playClick.gif') {
  i.src='playClick.gif'; } }

function playOver(i){
if(i.src.substr(i.src.lastIndexOf("/")+1)!='playClick.gif') {
  i.src='playOver.gif'; } }

function playOut(i){
if(i.src.substr(i.src.lastIndexOf("/")+1)!='playClick.gif') {
  i.src='playOut.gif'; } }

og så skal dine img tags se således ud :

<img style="width: 60px; height: 40px; border: 0px;" onClick="playOn(this);" onMouseOver="playOver(this);" onMouseOut="playOut(this);" src="playOut.gif" alt="Start button" title="Start">

Mvh. Johan
Avatar billede Tony Juniormester
30. januar 2006 - 08:42 #4
Tak Johan - hvor kører det bare lækkert!

Jeg gav img'erne et id og satte en default funk. på, så knapperne ikke alle er indtrykkede:

function defaultBtns() {
  document.getElementById('playBtn').src = 'playOut.gif';
  document.getElementById('pauseBtn').src = 'pauseOut.gif';
  document.getElementById('stopBtn').src = 'stopOut.gif';
}

Det ser ud til at virke udmærket at kalde dem alle i stedet for at lave en række af if-sætninger for at finde den indtrykkede, men i yderste konsekvens kan jeg ende op med 9 knapper til betjening af videoafspilleren, hvoraf de 7 er afhængige af hinanden, så måske har du et andet løsningsforslag?

P.s. Husk at afgive et 'svar' ;-)
Avatar billede olebole Juniormester
30. januar 2006 - 08:57 #5
<ole>

Du kunne jo sætte en global variabel til null. Når du så klikker på et billede,
checker du, om variablen er sat. Er den det, sætter du det pågældende billedes src til det ønskede.
Derefter sætter du det nye billedes src og variablen lig med billedet  :)

/mvh
</bole>
Avatar billede olebole Juniormester
30. januar 2006 - 09:05 #6
- noget à la:

<script type="text/JavaScript">
var stayPic = null;
function swap(oElm, over) {
    if (oElm==stayPic) return
    if (over) oElm.src = oElm.src.replace("over", "out");
    else oElm.src = oElm.src.replace("out", "over");
}
function setPic(oElm) {
    if (oElm==stayPic) return
    if (stayPic) stayPic.src = stayPic.src.replace("down", "out");
    oElm.src = oElm.src.replace("over", "down");
    stayPic = oElm;
}
</script>

<img src="picA_out.gif" onmouseover="swap(this, true)" onmouseout="swap(this)" onclick="setPic(this)">

<img src="picB_out.gif" onmouseover="swap(this, true)" onmouseout="swap(this)" onclick="setPic(this)">

<img src="picC_out.gif" onmouseover="swap(this, true)" onmouseout="swap(this)" onclick="setPic(this)">
Avatar billede Tony Juniormester
30. januar 2006 - 09:30 #7
Hej Ole - Godt Nytår! - how goes? :-)

Den kan jeg godt nok ikke lige få til at køre: http://www.videomedia.dk/test/buttons_panel/test01.html

/Tony
Avatar billede johan.o Nybegynder
30. januar 2006 - 12:15 #8
Jeg har prøvet at kigge lidt på relationerne mellem knapperne....prøv at se på dette :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Buttons panel - test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/javascript">
// Preload images
image01= new Image()
image01.src="buttons_panel.jpg"

image02= new Image() // play button
image02.src="picA_down.gif"
image03= new Image()
image03.src="picA_out.gif"
image04= new Image()
image04.src="picA_over.gif"

image05= new Image() // pause button
image05.src="picB_down.gif"
image06= new Image()
image06.src="picB_out.gif"
image07= new Image()
image07.src="picB_over.gif"

image08= new Image() // stop button
image08.src="picC_down.gif"
image09= new Image()
image09.src="picC_out.gif"
image10= new Image()
image10.src="picC_over.gif"

stat = new Array();
stat['picA']=true;
stat['picB']=false;
stat['picC']=true;

function butOver(oObject) {
if(oObject.src.indexOf("_out.gif")>0) {
  oObject.src=oObject.src.substr(0, oObject.src.lastIndexOf("_"))+"_over.gif"; } }

function butOut(oObject) {
if(oObject.src.indexOf("_over.gif")>0) {
  oObject.src=oObject.src.substr(0, oObject.src.lastIndexOf("_"))+"_out.gif"; } }

function butDown(oObject) {
if(stat[oObject.id]==true) {
  if(oObject.src.indexOf("_over.gif")>0) {
  oObject.src=oObject.src.substr(0, oObject.src.lastIndexOf("_"))+"_down.gif";
  if(oObject.id=="picA") { stat['picB']=true; } }
  else {
  if(oObject.id=="picB") {
    oObject.src=oObject.src.substr(0, oObject.src.lastIndexOf("_"))+"_over.gif"; } } } }

function butUp(oObject, oRel) {
if(oObject.src.indexOf("_down.gif")>0) {
  oObject.src=oObject.src.substr(0, oObject.src.lastIndexOf("_"))+"_over.gif";
  if(oObject.id=="picC") { stat['picB']=false; }
  oArray=oRel.split(",");
  for(t=0; t<oArray.length; t++) {
  document.getElementById(oArray[t]).src=oArray[t]+"_out.gif"; }
  } }

</script>
</head>

<body>
<div id="panelContainer" style="position:absolute; width:300px; height:50px; left:140px; top:140px; z-index:1;">
  <div id="buttonsBack" style="position:absolute; width:300px; height:50px; left:0px; top:0px; z-index:2;"><img src="buttons_panel.jpg" width="300" height="50" alt="" border="0"></div>

  <div id="buttonsContainer" style="position:absolute; width:180px; height:40px; left:30px; top:6px; z-index:3;">
    <div id="playBtnContainer" style="cursor:pointer; position:absolute; width:54px; height:40px; left:00px; top:0px; z-index:4;"><img id="picA" style="width:54px; height:40px; border:0px;" onMouseDown="butDown(this);" onMouseUp="" onMouseOver="butOver(this);" onMouseOut="butOut(this);" src="picA_out.gif" alt="Start button" title="Start"></div>
    <div id="pauseBtnContainer" style="cursor:pointer; position:absolute; width:54px; height:40px; left:61px; top:0px; z-index:5;"><img id="picB" style="width:54px; height:40px; border:0px;" onMouseDown="butDown(this);" onMouseUp="" onMouseOver="butOver(this);" onMouseOut="butOut(this);" src="picB_out.gif" alt="Pause button" title="Pause"></div>
    <div id="stopBtnContainer" style="cursor:pointer; position:absolute; width:54px; height:40px; left:122px; top:0px; z-index:6;"><img id="picC" style="width:54px; height:40px; border:0px;" onMouseDown="butDown(this);" onMouseUp="butUp(this, 'picA,picB');" onMouseOver="butOver(this);" onMouseOut="butOut(this);" src="picC_out.gif" alt="Stop button" title="Stop"></div>
  </div>

</div>
</body>
</html>

Mvh. Johan
Avatar billede Tony Juniormester
30. januar 2006 - 13:31 #9
Johan - Det er godt nok tæt på, men der er stadig lidt problemer:

http://www.videomedia.dk/test/buttons_panel/test02.html

(Jeg har lagt knapperne til afbenyttelse, det gør nok det hele 'lidt' nemmere ...)
Avatar billede johan.o Nybegynder
30. januar 2006 - 16:28 #10
Hvad er problemet ?

Mvh. Johan
Avatar billede Tony Juniormester
30. januar 2006 - 16:36 #11
Hvis man f.eks. klikker på 'Start'og dernæst på 'Stop', så forbliver 'Stop' ikke inde efter klikket, men lad endelig være med at arbejde mere på det. Du har allerede lavet en særdeles fin udgave, jeg sagtens kan bruge.

Understående kan jeg sagtens leve med, så lig du blot en 'svar', så jeg kan uddele point.

function defaultBtns() {
  document.getElementById('playBtn').src = 'playOut.gif';
  document.getElementById('pauseBtn').src = 'pauseOut.gif';
  document.getElementById('stopBtn').src = 'stopOut.gif';
}
Avatar billede johan.o Nybegynder
30. januar 2006 - 16:58 #12
Hm, ja okay det styrer du selvfølgelig selv :), men det virker da ikke logisk at stop skal blive inde, hvorfor skulle den det ?

Men det er egentlig blot ment som et skridt på vejen, du sagde jo selv at du havde omkring 9 knapper der skulle 'spille sammen', så skal vi ikke kigge på det, eller vil du hellere selv sidde og 'bokse' lidt med det :)

Mvh. Johan
Avatar billede Tony Juniormester
31. januar 2006 - 11:39 #13
Åhh ja, selvfølgelig! - jeg sidder jo i en 'osteklokke' og har hele interaktionen i hovedet, Derfor er det 'selvfølgeligt' for mig at Stop-knappen skal blive inde, men din løsning er da så sandelig og ganske lige så brugbar for apparat-metaforen! Undskyld ...

Ja, det kunne da være en sjov opgave at lave et særdeles udvidet betjeningspanel til en afspiller, men det vil jeg nu foreslå, at vi tager of-list, hvis du har lyst, da det er / vil blive en omfattende opgave. Ja, jeg har rodet ret meget med interaktionen med 'Windows Media Player' (WMP) og har temlig mange forskellige metoder 'på hylden' og mangler vel blot en finpudsning af 'time line' og 'Volume'.

Tilbage til emnet :-)
Her er din kode samvirkende med WMP:

http://www.videomedia.dk/test/buttons_panel/test03.html
Avatar billede johan.o Nybegynder
31. januar 2006 - 12:00 #14
He he, ja selve samkøringen med WMP ved jeg intet om, så den vil jeg ikke blande mig i, men hvis du får brug for yderligere hjælp med javascript delen af betjenings panelet så vender du blot tilbage.

Jeg smider et svar, så kan du jo oprette et nyt spørgsmål hvis du får brug for hjælp igen.

Held og lykke med det :)

Mvh. Johan
Avatar billede Tony Juniormester
31. januar 2006 - 12:03 #15
Tusinde tak og mange tak for hjælpen!

Will do ... :-)

/Tony
Avatar billede johan.o Nybegynder
02. februar 2006 - 10:59 #16
Tak for points :)
Avatar billede Tony Juniormester
05. august 2006 - 20:35 #17
Blot til orientering og som eksempel på, at den hjælp der gives her på E også fører til noget 'derude' ...

http://www.primagolf.dk/pages/videoplayer/pronstorferkrug/pronstorfpg.asp

Atter tak til Johan og Ole!
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 18:29 Beregning af flextid - formler Af Slettet bruger i Excel
I går 10:05 Sætte flere billeder sammen til et billede - IPad seneste version Af nu_igen i Billedbehandling
24/0514:56 Udseende af datoer Af ErikHg i Excel
23/0509:37 hvilken AI synes I er bedst? Af jcr18 i Andre onlineløsninger
22/0518:51 Pausepil på youtube i chrome Af valby i Browsere
White papers
Flere white papers »