8 berichten aan het bekijken - 1 tot 8 (van in totaal 8)
  • Q:
    Bijdrager
    MacBeer

    plaatje in tooltip [html/css + JS]

    Dit weekend ben ik bezig geweest om een plaatje in een tooltip te krijgen die tevoorschijn komt wanneer je met de cursor over een stuk tekst hovert. Helaas is mijn kennis over html/css nog niet helemaal zoals het eigenlijk moet zijn en javascript daar snap ik al helemaal niks van.

    Ik ben op zoek geweest naar tutorials over dit probleem. ALA heeft een mooi artikel geschreven over het laten verschijnen van een ‘hover caption’ die verschijnt wanneer je met de cursor over bepaalde punten van een wereldkaartje zweeft.
    Echter, ik hoef die image-map punten niet te hebben maar wil gewoon dat de tooltip verschijnt wanneer je over tekst zweeft. Ik zie maar niet hoe je dit in de techniek van het ALA artikel voor elkaar krijgt.

    Op Squidfingers is een tooltip-techniek te vinden die vele malen eenvoudiger in elkaar zit. Komt volgens mij vooral door het feit dat de tooltip geen plaatje maar gewoon tekst laat zien.
    Het liefste gebruik ik deze techniek omdat het een stuk minder code is en ook werkt met tekst precies zoals ik wil. Ik weet alleen niet hoe ik nu in plaats van die tekst een plaatje kan laten zien. Gewoon een verwijzing naar een plaatje erin zetten werkt niet.

    Heeft iemand een idee hoe ik dit het beste kan aanpakken of weet iemand ergens een tutorial die precies uitlegt wat ik wil?

    Bijdrager
    computer space

    Ik heb een hele mooie gezien in puur CSS, maar de bookmark staat niet op mijn thuiscomputer. Als ik m tegenkom post ik m even.

    Bijdrager
    computer space
    Bijdrager
    iJoost

    Bij Squidfingers zie je op een gegeven moment in de JavaScript

    [code:1:1f19d75502]this.tip.innerHTML = text;[/code:1:1f19d75502]

    Waarbij die text dan weer eerder al is afgeleid van de title van de link (beetje raar want zo krijg je de oorspronkelijke gele tooltips ook nog). Je kunt op dat punt zonder bezwaar zoiets als

    [code:1:1f19d75502]this.tip.innerHTML = ‘<IMG src="fubar.jpg"/><BR/>’+text;[/code:1:1f19d75502]

    doen.

    Bijdrager
    MacBeer

    @ iJoost: jouw methode werkt, echter op deze manier laat de tooltip eenzelfde plaatje zien bij meerdere links. Ik moet in feite het klaar zien te spelen dat de tooltip plaatjes kan laten zien en dat ik per link een ander plaatje kan specificeren. De tooltip blijft ook plakken en verdwijnt niet meer ‘on mouse out’

    @ Martiniman: dank je voor de link. De css is erg ondeuidelijk opgemaakt… ik moet even heel goed kijken hoe ze dat daar gedaan hebben.

    Bijdrager
    computer space
    ”MacBjorn”

    @ Martiniman: dank je voor de link. De css is erg ondeuidelijk opgemaakt… ik moet even heel goed kijken hoe ze dat daar gedaan hebben.

    Zit ik ook vaak mee te worstelen. Die gast maakt de mooiste dingen met CSS, maar goede reproduceerbare code is het niet. Hij zou zijn voorbeelden iets simpeler mogen maken. In dit voorbeeld is zo’n pijlpunt iets dat niet nodig is, maar wel een groot deel van de code bepaalt.

    Bijdrager
    hansenonline

    als je zijn css slideshow begrijpt, zal je deze ook begrijpen het is het zelfde concept.
    heb even wat zitten klooien en heb hier de ccs code en de html voor je uit de pagina gehaald, misschien dat het zo duidelijker voor je wordt.
    [code:1:e0a23d489b]
    <style type="text/css">
    /* setup the background image of the British Isles */
    .uk {
    padding:0;
    margin:0;
    list-style-type:none;
    background:#fff url(graphics/britain.gif);
    width:300px;
    height:350px;
    margin:50px 225px 100px 225px;
    position:relative;
    }
    /* move the text off screen and shows the markers*/
    .uk li a {
    text-indent:-999px;
    display:block;
    width:8px; /*markers*/
    height:8px; /*markers*/
    background:#000;
    position:absolute;
    line-height:8px;}
    /* make the images and description invisible and an absolute position so that it does not take up any space */
    .uk li a em {
    visibility:hidden;
    position:absolute;
    }
    /* position the square markers */
    .uk li a.bs {top:288px; left:190px;}
    .uk li a.ln {top:280px; left:240px;}
    .uk li a.sw {top:282px; left:162px;}
    .uk li a.nt {top:235px; left:210px;}
    .uk li a.gl {top:130px; left:148px;}
    .uk li a.bf {top:172px; left:112px;}
    .uk li a.du {top:220px; left:105px;}
    /* move the text back into view on hover textblock of arrow */
    .uk li a:hover {
    background:#600;
    text-indent:0;
    height:1.2em;
    font-size:1em;
    color:#fff;
    line-height:1em;
    padding:2px 10px;
    width:90px;
    }
    /* hack for IE5.x */
    * html .uk li a:hover {width:110px; height:1.5em; width:90px; height:1.2em;}
    /* make the descriptive text visible, give it a size and position */
    .uk li a:hover em { visibility:visible;
    margin-left:5px;
    background:#fff;
    border:1px solid #600;
    width:150px; color:#600;
    padding:25px;font-style:normal;
    top:-135px; font-family:tahoma, geneva, "lucida sans unicode", "lucida grande", arial, sans-serif;
    letter-spacing:1px;
    line-height:1.5em;}
    /* hack for IE5.x */
    * html .uk li a:hover em {width:200px; width:150px;}
    /* give the image a border and margin */
    .uk li a:hover em img {
    border:1px solid #000;
    display:block; margin-bottom:10px;
    }
    /* style the empty span (I know it’s not semantically correct) into an arrow point */
    .uk li a:hover em span {
    display:block;
    width:0; height:0;
    overflow:hidden;
    border:15px solid #fff;
    border-width:15px 0 15px 15px;
    border-left-color:#600;
    position:absolute;
    left:0;
    top:128px;}
    /* hack for IE5.x */
    * html .uk li a:hover em span {width:30px; height:30px; width:0; height:0;}
    </style>[/code:1:e0a23d489b]
    [code:1:e0a23d489b]
    <ul class="uk">
    <li><a class="ln" href="#nogo">London<em><img src="graphics/london.jpg" alt="View of London" title="View of London" />London has the greatest concentration of major attractions in Britain
    and boasts four World Heritage Sites.<span></span></em></a>
    </li>

    <li><a class="bs" href="#nogo">Bristol<em><img src="graphics/bristol.jpg" alt="View of Bristol" title="View of Bristol" />Bristol is an exciting city, overflowing with intriguing,
    traditional and occasionally off the wall things to do and see.<span></span></em></a>
    </li>

    <li><a class="sw" href="#nogo">Swansea<em><img src="graphics/swansea.jpg" alt="View of Swansea" title="View of Swansea" />Swansea, Wales’ City by the Sea and birthplace of Dylan Thomas and Catherine Zeta Jones, is a lively and vibrant maritime city and regional shopping centre.<span></span></em></a>
    </li>

    <li><a class="nt" href="#nogo">Nottingham<em><img src="graphics/nottingham.jpg" alt="View of Nottingham" title="View of Nottingham" />Some of the most popular places of interest with
    visitors are Nottingham Castle Museum and Art Gallery, the historic Lace Market area and the Caves.<span></span></em></a>
    </li>

    <li><a class="gl" href="#nogo">Glasgow<em><img src="graphics/glasgow.jpg" alt="View of Glasgow" title="View of Glasgow" />One of Europe’s leading cultural capitals, Glasgow has an enviable portfolio of internationally renowned museums and galleries.<span></span></em></a>
    </li>

    <li><a class="bf" href="#nogo">Belfast<em><img src="graphics/belfast.jpg" alt="View of Belfast" title="View of Belfast" />The capital of Northern Ireland combines fine Victorian
    architecture, a fascinating industrial heritage and beautiful scenic surroundings.<span></span></em></a>
    </li>

    <li><a class="du" href="#nogo">Dublin<em><img src="graphics/dublin.jpg" alt="View of Dublin" title="View of Dublin" />Dublin has become a fashionable and cosmopolitan destination, yet
    remains one of Europe’s more intimate capital cities.<span></span></em></a>
    </li>
    </ul>[/code:1:e0a23d489b]

    Bijdrager
    iJoost
    ”MacBjorn”

    @ iJoost: jouw methode werkt, echter op deze manier laat de tooltip eenzelfde plaatje zien bij meerdere links. Ik moet in feite het klaar zien te spelen dat de tooltip plaatjes kan laten zien en dat ik per link een ander plaatje kan specificeren. De tooltip blijft ook plakken en verdwijnt niet meer ‘on mouse out’.

    ‘T was maar een voorbeeld. Net zoals je telkens een andere tekst kunt genereren kun je ook telkens een andere URL maken. Je kent gewoon een string toe aan die innerHTLM. Daar kun je, als je dat wilt, de gekste dingen mee doen.;-)

    Toch een beetje JavaScript leren vrees ik…

    Klein tipje in de goede richting: Je zou in de anchor-tag waarvan nu het title-attribuut wordt gebruikt een eigen attribuut plaatje=”url…” kunnen zetten.

    [code:1:a4d6c1ea16]<a href="fu" title="foobar" plaatje="bar">fubar</a>[/code:1:a4d6c1ea16]

    Die kun je dan weer uitlezen vanuit JavaScript met getAttribute(‘plaatje’) en daarna het mouseover event gebruiken om je string voor die innerHTML te construeren.

    [code:1:a4d6c1ea16]a.onmouseover = function () {tooltip.show (this.title,this.getAttribute(’plaatje’))};[/code:1:a4d6c1ea16]

    en

    [code:1:a4d6c1ea16]tooltip.show = function (text,plaatje) {[/code:1:a4d6c1ea16]

    etc.

8 berichten aan het bekijken - 1 tot 8 (van in totaal 8)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.