Computergenie.nl    

Computergenie.nl
  Registreer!
  Registreer
Homepage
Home
Top 10
Top 10
Forum
Forum
Prijsindex
Prijsindex
Nieuws
Nieuws
Downloads
Downloads
Hulp & Uitleg
Hulp & Uitleg
Uitgebreid zoeken
 
  Zoeken •  Gebruikerslijst  •  Gebruikersgroepen   •  Registreer  •  Profiel  •  Log in om je privť berichten te bekijken  •  Ben je al lid?  Log in! 
Ben je al lid?  Log in!
Kies uw onderwerp:
Computer-Cafť
Knowledge Base
Hardware
Software
Internet & netwerken
Games
Scripten & programmeren
Digitale fotografie & video
Multimedia
GSM & mobile
Sitecheck & links
OfficiŽle mededelingen
Feedback
ISL Light
Aanbiedingen
Markt-plaats
Hulp & Uitleg

Sponsors:

Cloud VPS

Relaties:

PC Beveiliger
Forum » Scripten & programmeren » Onmouseover i.pv. hyperlink
Onmouseover i.pv. hyperlink

Nieuw onderwerpNieuw antwoord
frehen Bericht Geplaatst op 03-08-2011 Reageer met quote
Senior lid
Hallo allemaal, zit weer wat te vogelen.
Zie volgende link:
http://www.workwithit-test.nl/anneliesvangurp/index.html
Op de pagina Glas heb ik de plaatjes nu een hyperlink meegegeven die
ervoor zorgen dat een vergroot plaatje wordt weergegeven in de iframe
rechts. Die plaatjes heb ik dan dus op html pagina's staan en die link
geef ik dan dus mee aan die hyperlink om dus in de iframe te laten zien.

Maar ik zag dat liever gebeuren met een mouseover. Als van alles zitten
proberen, maar kom er niet echt uit en zou graag wat hulp kunnen
gebruiken. De code is nu voor het eerste plaatje linksboven:
Code:
<a target="I2" href="images/Glas%20koudbewerking/directshow/CIMG0398.htm">
<img border="0" src="images/Glas%20koudbewerking/CIMG0398.png" width="100" height="75"></a></td>

Hoe kan ik dit wijzigen in een mouseover effect zodat de link in de
iframe wijzigt ???
Of misschien weet iemand een manier om zonder een iframe dit te
bewerkstelligen, heb iets gezien van <a name="anyname">, kan ik dat
meegeven aan die tabelcel bijv. waar nu die iframe in staat ??
Alvast hartelijk dank.




grtjs
frehen
vosManz Bericht Geplaatst op 03-08-2011 Reageer met quote
Technische man
Het lijkt me inderdaad overbodig hier een iframe voor te gebruiken.

Het beste kun je het iframe denk ik vervangen door een img-tag, bijvoorbeeld:
Code:
<img src="images/Glaskoudbewerking/directshow/CIMG0264.png" alt="" id="preview1" />

Hier kun je al direct de eerste afbeelding in plaatsen.

In de code vervang je elke link vervolgens door een mouseover. Dus vervang dit:
Code:
<td width="108" height="90" align="center">
      <a target="I2" href="images/Glaskoudbewerking/directshow/CIMG0398.htm">
      <img border="0" src="images/Glaskoudbewerking/CIMG0398.png" width="100" height="75"></a></td>

door dit:
Code:
<td width="108" height="90" align="center">
      <img border="0" src="images/Glaskoudbewerking/CIMG0398.png" style="width: 100px; heigt: 75px; cursor: pointer;" onmouseover="document.getElementById( 'preview1' ).src = 'images/Glaskoudbewerking/directshow/CIMG0398.png';"></td>


De code in het onmouseover gedeelte geeft aan dat de afbeelding met ID 'preview1' vervangen moet worden door 'images/Glaskoudbewerking/directshow/CIMG0398.png'. Uiteraard moet je zo elke afbeelding even vervangen, en de juiste waarde invullen.

Ik zie dat je meerdere iframe's op de pagina hebt. Als je deze allemaal vervangt moet je er wel op letten dat je het 'id' van de img uniek houdt. Ook de bijbehorende links moeten dan aangepast worden naar de juiste id.




::: vosManz :::
frehen Bericht Geplaatst op 03-08-2011 Reageer met quote
Senior lid
Geweldig Vosmanz, ik ga er direct mee aan de slag !
Maak eerst even een Glas2 pagina, zodat ik niets kwijtraak.
Dikke dank ! Ik meld het wanneer ik succesvol ben !




grtjs
frehen
frehen Bericht Geplaatst op 03-08-2011 Reageer met quote
Senior lid
Het is ZEKER succesvol !! Eerste serie werkt PERFECT !!
Alleen... bij de tweede serie, dus naar de tweede iframe zeg maar,
gaat het mis.

Ik had daar de id gewijzigd naar preview2 in eerste instantie, maar iets
gaat daar fout, ook toen ik het veranderde naar preview6... is dat niet
uniek genoeg ?? Heb het nu als id fusing1 meegegeven maar het springt
op slot zodra ik op een plaatje uit de tweede serie kom, zie Glas2.

http://www.workwithit-test.nl/anneliesvangurp/index.html

Weet niet wat ik nu fout doe, heb exact gekopieerd en aangepast.
Hoop dat je er nog naar kan kijken Vosmanz en alvast dank !




grtjs
frehen
vosManz Bericht Geplaatst op 03-08-2011 Reageer met quote
Technische man
Kan het kloppen dat je de nieuwe versie nog niet hebt geupload? Ik zie namelijk nog steeds de iframe versie.

Waar je op moet letten is dat je het ID aanpast in zowel het iframe, als in de link. 'preview2' zou uniek genoeg moeten zijn. Dit moet je vervolgens ook in de onmouseover aanpassen. Dit:
Code:
onmouseover="document.getElementById( 'preview1' ).src

wordt dan dus:
Code:
onmouseover="document.getElementById( 'preview2' ).src

Zo weet de browser welke afbeelding vervangen moet worden, in dit geval dus preview2. Als je dit niet aanpast, zal bij een mouseover van de 2e serie, de afbeelding bij de 1e serie veranderen :)




::: vosManz :::
frehen Bericht Geplaatst op 04-08-2011 Reageer met quote
Senior lid
Heb je ververst ? F5 of Control-F5 ??
Want ik heb toch echt de laatste versie geupload.
De index, omdat ik Glas2 heb toegevoegd en Glas2 is helemaal ontdaan
van iframes en gaat dus puur van de GetelementByID uit.
Zou dit maar eenmaal per pagina uitgevoerd kunnen worden ??
Lijkt mij toch niet want je geeft een unieke ID mee... vreemd.

De totale code van het tweede gedeelte van glas2.htm is als volgt:
Code:

<td width="108" height="90" align="center">
      <img border="0" src="images/Glasfusing/CIMG0578.png" style="width: 100px; heigt: 75px; cursor: pointer;"
        onmouseover="document.getElementById( 'fusing1' ).src = 'images/Glasfusing/directshow/CIMG0578.png';"></td>
      <td width="108" height="90" align="center">
      <img border="0" src="images/Glasfusing/CIMG1084.png" style="width: 100px; heigt: 75px; cursor: pointer;"
        onmouseover="document.getElementById( 'fusing1' ).src = 'images/Glasfusing/directshow/CIMG1084.png';"></td>
      <td width="108" height="90" align="center">
      <img border="0" src="images/Glasfusing/_26.png" style="width: 100px; heigt: 75px; cursor: pointer;"
        onmouseover="document.getElementById( 'fusing1' ).src = 'images/Glasfusing/directshow/_26.png';"></td>
      <td width="22" height="300" align="center" rowspan="6" bgcolor="#FFFFFF">&nbsp;
      </td>
      [b]<td width="600" height="400" rowspan="6" valign="top">
      <img src="images/Glasfusing/direcshow/CIMG0578.png" alt="" id="fusing1" /></tr>[/b]   <tr>
      <td width="108" height="90" align="center">
      <img border="0" src="images/Glasfusing/_49.png" style="width: 100px; heigt: 75px; cursor: pointer;"
        onmouseover="document.getElementById( 'fusing1' ).src = 'images/Glasfusing/directshow/_49.png';"></td>
      <td width="108" height="90" align="center">
      <img border="0" src="images/Glasfusing/IMG_9666.png" style="width: 100px; heigt: 75px; cursor: pointer;"
        onmouseover="document.getElementById( 'fusing1' ).src = 'images/Glasfusing/directshow/IMG_9666.png';"></td>
      <td width="108" height="90" align="center">
      <img border="0" src="images/Glasfusing/IMG_9667.png" style="width: 100px; heigt: 75px; cursor: pointer;"
        onmouseover="document.getElementById( 'fusing1' ).src = 'images/Glasfusing/directshow/IMG_9667.png';"></td>
   </tr>
   <tr>
      <td width="108" height="90" align="center" bgcolor="#FAFAFA">
      <img border="0" src="images/Glasfusing/DSCN2495.png" style="width: 100px; heigt: 75px; cursor: pointer;"
        onmouseover="document.getElementById( 'fusing1' ).src = 'images/Glasfusing/directshow/DSCN2495.png';"></td>
      <td width="108" height="90" align="center" bgcolor="#FAFAFA">
      <img border="0" src="images/Glasfusing/DSCN2498.png" style="width: 100px; heigt: 75px; cursor: pointer;"
        onmouseover="document.getElementById( 'fusing1' ).src = 'images/Glasfusing/directshow/DSCN2498.png';"></td>
      <td width="108" height="90" align="center" bgcolor="#FAFAFA">
      <img border="0" src="images/Glasfusing/IMG_9659.png" style="width: 100px; heigt: 75px; cursor: pointer;"
        onmouseover="document.getElementById( 'fusing1' ).src = 'images/Glasfusing/directshow/IMG_9659.png';"></td>
   </tr>
   <tr>
      <td width="108" height="90" align="center" bgcolor="#FAFAFA">
      <img border="0" src="images/Glasfusing/IMG_9661.png" style="width: 100px; heigt: 75px; cursor: pointer;"
        onmouseover="document.getElementById( 'fusing1' ).src = 'images/Glasfusing/directshow/IMG_9661.png';"></td>
      <td width="108" height="90" align="center" bgcolor="#FAFAFA">
      <img border="0" src="images/Glasfusing/IMG_9662.png" style="width: 100px; heigt: 75px; cursor: pointer;"
        onmouseover="document.getElementById( 'fusing1' ).src = 'images/Glasfusing/directshow/IMG_9662.png';"></td>
      <td width="108" height="90" align="center" bgcolor="#FFFFFF">&nbsp;</td>
   </tr>
   <tr>
      <td width="108" height="90" align="center" bgcolor="#FFFFFF">
      &nbsp;</td>
      <td width="108" height="90" align="center" bgcolor="#FFFFFF">&nbsp;</td>
      <td width="108" height="90" align="center" bgcolor="#FFFFFF">&nbsp;</td>
   </tr>
</table>


Het dikgedrukte (?) gedeelte in de code is de zgn "placeholder" van de
ID die is meegegeven... en dat heb ik toch, volgens mij, goed
meegegeven in de mouseover bij de afbeeldingen... vind dit echt gek.
Mja soms dan weet je zeker dat jet allemaal goed hebt en heb je toch
een kleinigheid over het hoofd gezien, maar zoals ik er nu naar kijk
zou het gewoon moeten werken... en dat doet het helaas niet.. bij het
tweede gedeelte dan. Eerste is ECHT perfect, is een mooi effect dit !
Ik wil je heel erg bedanken hiervoor, is echt gaaf dit. Hoop dat we het
geheel werkend krijgen.




grtjs
frehen
vosManz Bericht Geplaatst op 04-08-2011 Reageer met quote
Technische man
Ja, ververst, CTRL+F5, en cache leeggemaakt. Zonder resultaat. Maar als ik er handmatig glas2.html van maak werkt het wel :)



frehen schreef:
<td width="108" height="90" align="center">
<img border="0" src="images/Glasfusing/_26.png" style="width: 100px; heigt: 75px; cursor: pointer;"
onmouseover="document.getElementById( 'fusing1' ).src = 'images/Glasfusing/directshow/_26.png';"></td>
<td width="22" height="300" align="center" rowspan="6" bgcolor="#FFFFFF">&nbsp;
</td>
<td width="600" height="400" rowspan="6" valign="top">
<img src="images/Glasfusing/direcshow/CIMG0578.png" alt="" id="fusing1" /></tr>

Zie je het verschil in bovenstaande? ;) Je hebt bij de ene 'direcshow' en bij de andere 'directshow'.

Direcshow (zonder t) lijkt in dit geval goed te zijn, typefoutje in de mapnaam?

Overigens mis je in bovenstaande code een </td> na je image placeholder.




::: vosManz :::
frehen Bericht Geplaatst op 05-08-2011 Reageer met quote
Senior lid
Ik had geen bericht gehad dat je had gereageerd overigens.

Ik dacht in eerste instantie toen ik je bericht las, ik begrijp het niet,
maar toen ik aan het snuffen ging zag ik het.
Met het typen van de map directshow in Glasfusing was ik de t vergeten
en daardoor werkte het dus allemaal niet, want de grote plaatjes konden
dus niet gevonden worden omdat de juiste map niet eens bestond !!!
Jemig !! Zo zie je maar, wat ik al zei, die kleinigheden zie je vlug over het
hoofd !!!
Heb het nu helemaal goed en het werkt als een tierelier. Zie link.

Enige, maar daar vogel ik nog wel op is dat ik de getoonde grote
afbeelding rechts niet gecentreerd krijg ook niet als ik align=center
meegeef. Op zich gaat het zo ook, maar ik kijk nog wel.

Geweldig bedankt Vosmanz !! Het is prachtig !!




grtjs
frehen
vosManz Bericht Geplaatst op 06-08-2011 Reageer met quote
Technische man
Dat komt misschien omdat je HTML code niet helemaal correct is. Hier bijvoorbeeld:
Code:
<td width="550" height="435" valign="top">
      <table border="0" width="100%" height="100%" valign="top">
         <tr>
      <img src="images/Glaskoudbewerking/directshow/CIMG0398.png" alt="" id="preview1" />
         </tr>
      </table>
      </td>

In die tabel staat geen <td>, en dat is wel nodig in elke tabel. Overigens heeft die tabel zo ook niet veel nut, dit zou voldoende moeten zijn:
Code:
<td width="550" height="435" valign="top" align="center">
      <img src="images/Glaskoudbewerking/directshow/CIMG0398.png" alt="" id="preview1" />
      </td>

Hetzelfde geldt voor de andere 2 grote afbeeldingen.




::: vosManz :::
frehen Bericht Geplaatst op 06-08-2011 Reageer met quote
Senior lid
Inderdaad, dit werkt dus wel, centreert nu wel ja.
Ik had die tabel in tabel gemaakt zodat ik kon plaatsen,
maar dat ging zo toch niet. Dit is stukken beter.
Dikke dank Vosmanz. Ziet er strak uit zo !




grtjs
frehen
Nieuw onderwerpNieuw antwoord   


Forum » Scripten & programmeren » Onmouseover i.pv. hyperlink

Powered by Cloud VPS - High Availability Cloud Servers