aan alle goede dingen komt een eind, webmasterplein.net 2003 - 2013
wij danken jullie voor al mooie momenten die dankzij dit forum ontstonden - Derk, Rutger en Stef

Mouse over tekst probleem

Het echte opmaakwerk, alles vragen over HTMLen, CSSen en Javascripten.

Mouse over tekst probleem

Berichtdoor Marcello » 06 maart 2012 13:15

Goedemiddag!

Ik heb een mouse over script gevonden voor links, dus als je met je muis over de link gaat, verschijnt er een plaatje, als je met muis van de link afgaat verdwijnt het plaatje weer.
Nu heb ik het volgende probleem, stel je typt een verhaal met een aantal links erin, en daar wil je die mouse over voor gebruiken dan moet ik persee id=plaatje verwerken in <div> anders doet die het niet, en het hoe vaker je het gebruikt hoe hoger hetplaatje verschijnt, dat is niet wenselijk grr ik kan het niet goed uitleggen dit telt alleen voor IE op Firefox niet.

Heb dus 2 problemen:
1 met die id voor of na een <p> geen probleem maar tussen tekst gaat die automatisch een regeloverslaan als je dat doet.
2 Bij langere lappen tekst met links en mouse over opent het plaatje te hoog na de mouse over.
Zou het zeer op prijs stellen als iemand poogt mij te helpen :}

head gedeelte code

Code: Selecteer alles
<style type="text/css">
#plaatje {
position:absolute;
z-index:1000;
visibility:hidden; }
</style>

<script type="text/javascript">
function init() {
if (window.Event) {document.captureEvents(Event.MOUSEMOVE);}
document.onmousemove = haalMuisPositie; }

function haalMuisPositie(e) {
muisX = (window.Event) ? e.pageX : event.clientX;
muisY = (window.Event) ? e.pageY : event.clientY; }

function toonPlaatje(naam,beeldje) {
laag = document.getElementById(naam);
laag.innerHTML = '<img src=' +beeldje+'>';
laag.style.visibility = "visible";
laag.style.top = muisY + "px";
laag.style.left = muisX + "px";
plaatsPlaatje() }

function verbergPlaatje(naam){
laag = document.getElementById(naam);
laag.style.visibility = "hidden"; }
 
function plaatsPlaatje() {
laag.style.top = muisY + "px";
laag.style.left = muisX + "px"; }
</script>


Body onload
Code: Selecteer alles
<body onload="init()">


het oproepen van id en het plaatje zelf plus eventuele link
Code: Selecteer alles
<div id="plaatje"></div>
<a href="#" onmouseover="toonPlaatje('plaatje','foto.jpg');" onmouseout="verbergPlaatje('plaatje');">tekst</a>
Avatar gebruiker
Marcello
wmpr
 
Berichten: 257
Geregistreerd: 29 nov 2003 20:55
Woonplaats: Groningen

Re: Mouse over tekst probleem

Berichtdoor Marcello » 06 maart 2012 15:42

Opgelost! heb al 10x de oplossing geprobeerd te posten, maar krijg steeds bad request helaas.
Avatar gebruiker
Marcello
wmpr
 
Berichten: 257
Geregistreerd: 29 nov 2003 20:55
Woonplaats: Groningen

Re: Mouse over tekst probleem

Berichtdoor KillerSponge » 07 maart 2012 09:17

Noes, te laat :P Hoe heb je het opgelost?

(En Bad Requests? Heuh?)
Blabla en andere onzin - http://killersponge.nl
Avatar gebruiker
KillerSponge
Beheerder
Beheerder
 
Berichten: 14456
Geregistreerd: 24 aug 2004 13:05

Re: Mouse over tekst probleem

Berichtdoor Marcello » 13 maart 2012 14:38

Ik had een ander script gevonden die perfect en makkelijk werkt

Code: Selecteer alles
<!-- css mouse over script-->
<style type="text/css">

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #EBEAE5;
padding: 5px;
left: -1000px;
border: 1px solid black;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

</style>
<!-- Einde head gedeelte mouse over script-->


Code: Selecteer alles
<!-- op de plek waar de mouseover moet komen in body-->
<a class="thumbnail" href="#thumb">naam van de link<span><img src="plaatje.jpg" /><br /></span></a>
Avatar gebruiker
Marcello
wmpr
 
Berichten: 257
Geregistreerd: 29 nov 2003 20:55
Woonplaats: Groningen

Re: Mouse over tekst probleem

Berichtdoor Marcello » 13 maart 2012 14:42

KillerSponge schreef:Noes, te laat :P Hoe heb je het opgelost?

(En Bad Requests? Heuh?)


ja als ik wat wou posten na die eerste post kreeg ik dat steeds, server probleem? nu wil het dus wel.
Avatar gebruiker
Marcello
wmpr
 
Berichten: 257
Geregistreerd: 29 nov 2003 20:55
Woonplaats: Groningen

Re: Mouse over tekst probleem

Berichtdoor KillerSponge » 13 maart 2012 23:28

Als het nu voorbij is vind ik t allemaal wel prima :)
Blabla en andere onzin - http://killersponge.nl
Avatar gebruiker
KillerSponge
Beheerder
Beheerder
 
Berichten: 14456
Geregistreerd: 24 aug 2004 13:05


Keer terug naar HTML, CSS, Javascript



cron