Mouseover pop up

Her kan du stille og svare på spørgsmål omkring CSS
Besvar
PeterBodker
Begynder
Indlæg:14
Tilmeldt:26. okt 2013, 14:29
Mouseover pop up

Indlæg af PeterBodker » 26. okt 2013, 14:36

Hej, jeg står med et problem.
Jeg vil gerne lave mouseover på et billede, og det er såmænd ikke et problem, men problemet er at når jeg fører musen over billedet så skal den lave et lille "popup" som på nedenstående link, i teksten "sparrow"
Men for at opsummere så vil jeg gerne lave effekten, på et billede frem for på en tekst.
Det er garanteret rimelig enkelt, jeg er bare ikke vanvittig god til at kode, så vær så meget pædagogisk som muligt hvis du vil hjælpe. Hvilket jeg håber.

Her er linket. http://www.cssplay.co.uk/menu/pop_ups.html

Mvh Peter

Brugeravatar
Daniel
Admin
Admin
Indlæg:625
Tilmeldt:14. jun 2011, 09:27
Geografisk sted:Danmark, Fyn, Nørre Aaby
Kontakt:

Re: Mouseover pop up

Indlæg af Daniel » 26. okt 2013, 22:24

Først og fremmest så velkommen til NemProgrammering.dk! :)

Der er flere forskellige måder hvorpå man kan opnå det du efterspørger, men den mest simple løsning er at bruge jQuery og jQuery UI.
Jeg har sammensat en lille JavaScript funktion til dig, så du nemt og hurtigt kan fremkalde den effekt du ønsker, på alle elementer du ønsker.
For at funktionen virker, er det vigtigt at du på alle sider, hvor du bruger denne funktion, inkluderer jQuery og jQuery UI.
Derudover skal du også inkluderer jQuery UI CSS filen hvis du ønsker at benytte de standard stylinger som jQuery UI tilbyder, det kan dog lade sig gøre at style det selv også.

Samlet kode:

Kode: Vælg alt

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery UI Tooltips</title>
        
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    </head>
    <body>
        <img src="mappe/billed.png" id="dog">
        <img src="mappe/billed.png" id="dog2">
        
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <script>
        $(document).ready(function() {
            function tooltip(id, content) {
                $('#'+id).tooltip({ items: '[id="'+id+'"]', content: content });
            }
            tooltip('dog', 'Hund');
            tooltip('dog2', '<img src="mappe/billed.png">');
        });
        </script>
    </body>
</html>
Den funktion jeg har lavet, er sat sådan op at når du vil lave en effekt på et element, så giver du det pågældende element et id.
Når det er gjort, så skal du bruge den funktion jeg har lavet, hvor du skal angive det id du lige har valgt, og så det indhold der skal være i din boks.

HTML eksempel:

Kode: Vælg alt

<img src="mappe/billede.png" id="test">
JavaScript eksempel:

Kode: Vælg alt

tooltip('test', 'Hej med dig, dette er en test!');
Som du kan se oppe på koden fra min den samlede testkode, så kan man også indsætte et img tag inde i det sidste parametre i tooltip funktionen.

Så for lige at tage den slaviske gennemgang.

1. Opret et dokument, og indsæt din HTML doctype, osv.
2. Inkluder jQuery UI CSS imellem dit head element, hvis du ønsker at bruge denne (find link i bunden her eller brug linket fra den samlede kode ovenover).

Kode: Vælg alt

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
3. Inkluder jQuery og jQuery UI lige før dit body element slutter (find links i bunden her eller brug linkene fra den samlede kode ovenover).

Kode: Vælg alt

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
4. Indsæt denne kode under inkluderingerne af jQuery og jQuery UI.

Kode: Vælg alt

<script>
    $(document).ready(function() {
        function tooltip(id, content) {
            $('#'+id).tooltip({ items: '[id="'+id+'"]', content: content });
        }
        //Indsæt tooltip funktionen herunder
    });
</script>
5. Indsæt et billed eller andet element på din side, og giv det et id.

Kode: Vælg alt

<img src="mappe/billed.png" id="id">
6. Indsæt tooltip funktionen under kommentaren "Indsæt tooltip funktionen herunder", med første parameter som det id du gav dit element, og andet parambeter som indholdet du gerne vil vise.

Kode: Vælg alt

tooltip('id', 'Indhold');
Nu har jeg forsøgt at forklare det så godt som muligt, men hvis der er noget du er i tvivl om, eller hvis du mangler noget, så skal du være velkommen til at spørge igen. :)

PeterBodker
Begynder
Indlæg:14
Tilmeldt:26. okt 2013, 14:29

Re: Mouseover pop up

Indlæg af PeterBodker » 27. okt 2013, 14:52

Tak! :-)
Meen det er ikke helt sådan som jeg vil have det, jo effekten er perfekt, men det er ikke sat op som jeg gerne vil have det.
For det første er der en "border" (vil jeg skyde på), som jeg gerne vil have væk. Som kan ses på nedenstående billede. Og så står det ikke som jeg gerne vil have det, det skulle gerne stå som det gør på det nederste billede. så hvordan styler man det. Med float osv. Og hvis du har en kode der kan gøre så det står præcis som på det nederste billede, vil jeg blive den gladeste i verdenen, for det kan jeg lære meget af at sidde og rode med den endelige kode, frem for at sjusse mig frem til det selv :-)
Håber at du/i forstår mit vulapyk.

billede med border:
Billede

Sådan skulle det gerne ende med at se ud:
Billede

Her er min fulde kode:

Kode: Vælg alt

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<!DOCTYPE html>
        <meta charset="utf-8">
        <title>jQuery UI Tooltips</title>
        
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    </head>
    <style>
	#wrap {
		width: 390px;
		height:150px;
	</style>
<body>
    <div id="wrap">
   	  <img src="Jpeg/Knapper produktkort/images/knapper-produktskabelon_01.jpg" width="195" height="75" id="fragt"/>
        <img src="Jpeg/Knapper produktkort/images/knapper-produktskabelon_02.jpg" width="195" height="75" id="bytte"/>
        <img src="Jpeg/Knapper produktkort/images/knapper-produktskabelon_03.jpg" width="195" height="75" id="viabill"/>
        <img src="Jpeg/Knapper produktkort/images/knapper-produktskabelon_04.jpg" width="195" height="75" id="levering"/>
        
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
      <script>
        $(document).ready(function() {
            function tooltip(id, content) {
                $('#'+id).tooltip({ items: '[id="'+id+'"]', content: content });
            }
              tooltip('fragt', '<img src="Jpeg/Pop up/images/gratis-fragt---pop-up_03.png" width="620" height="205"/>');
              tooltip('bytte', '<img src="Jpeg/Pop up/images/gratis-ombytning---pop-up_03.png" width="620" height="245"/>');
              tooltip('viabill', '<img src="Jpeg/Pop up/images/hurtig-leveringl---pop-up_03.png" width="620" height="295"/>');
	tooltip('levering', '<img src="Jpeg/Pop up/images/hurtig-leveringl---pop-up_03.png" width="620" height="295"/>');
        });
        </script>
</div>
</body>
</html>
---
den er måske lidt forvirrende her, men det er ikke helt så forvirrende i dreamweaver :-)

Håber meget på hjælp.

Mvh Peterbodker

PeterBodker
Begynder
Indlæg:14
Tilmeldt:26. okt 2013, 14:29

Re: Mouseover pop up

Indlæg af PeterBodker » 27. okt 2013, 14:53

og igen, vær gerne ret pædagogisk, da mit html kendskab ikke er verdens bedste :-)

Brugeravatar
Daniel
Admin
Admin
Indlæg:625
Tilmeldt:14. jun 2011, 09:27
Geografisk sted:Danmark, Fyn, Nørre Aaby
Kontakt:

Re: Mouseover pop up

Indlæg af Daniel » 27. okt 2013, 22:13

Det kan godt lade sig gøre det du viser på billedet der, dog vil jeg nok anbefale at du viser informations boksen under billederne der fremkalder boksen, ellers bliver det meget svært at få det til at virke, da hele siden flytter sig når der kommer det ekstra element ind på den, og så ryger musen væk fra billedet, og boksen forsvinder igen.

Ligesom før bruger jeg jQuery til funktionaliteten, men ikke længere jQuery UI, så linket til det og dens CSS fil er ikke længere nødvendigt.

Kode: Vælg alt

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Samlede test kode:

Kode: Vælg alt

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Sidens titel</title>

        <style>
        #infoContainer {
            display: hidden;
        }
        #imgContainer {
            width: 410px;
        }
        </style>
    </head>
    <body>
        <div id="mainContainer">
            <div id="imgContainer">
                <img src="mappe/billede.png" id="img1">
                <img src="mappe/billede.png" id="img2">
                <img src="mappe/billede.png" id="img3">
                <img src="mappe/billede.png" id="img4">
            </div>
            <div id="infoContainer"></div>
        </div>

        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script>
        $(document).ready(function() {
            function showInfo(id, content) {
                $('#'+id).on('mouseover', function() {
                    $('#infoContainer').html(content).show();
                });
                $('#'+id).on('mouseleave', function() {
                    $('#infoContainer').hide();
                });
            }

            showInfo('img1', '<img src="mappe/billede.png">');
            showInfo('img2', '<img src="mappe/billede.png">');
            showInfo('img3', '<img src="mappe/billede.png">');
            showInfo('img4', '<img src="mappe/billede.png">');
        });
        </script>
    </body>
</html>
Princippet er ligesom sidste gang at du skal inkludere jQuery lige før dit body element slutter, og så skal du derunder indsætte den funktion som jeg har lavet.

Kode: Vælg alt

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function() {
    function showInfo(id, content) {
        $('#'+id).on('mouseover', function() {
            $('#infoContainer').html(content).show();
        });
        $('#'+id).on('mouseleave', function() {
            $('#infoContainer').hide();
 
       });
    }
});
</script>
Du skal egentlig kalde funktionen ligesom ved den jeg viste tidligere, hvor du starter med at angive id på det element som musen skal holdes over for at der sker noget, og bagefter hvad der så skal vises. Nu hedder funktionen dog showInfo i stedet for tooltip.

Personligt kan jeg godt lide hvis der ikke kommer noget indhold frem hver gang man kører musen over et billede, så derfor ville jeg nok personligt lave sådan at man skal klikke på et af de små billeder for at indholdet kommer frem, og når man så fjerner musen så lukker boksen automatisk, dette er dog fuldstændig som man bedst selv kan lide det.
Det ville kunne gøres ved at erstatte funktionen med denne (intet andet skal ændres):

Kode: Vælg alt

function showInfo(id, content) {
    $('#'+id).on('click', function() {
        $('#infoContainer').html(content).show('slow');
    });
    $('#'+id).on('mouseleave', function() {
        $('#infoContainer').hide('slow');
    });
}
Håber dette er hvad du leder efter, og at du måske har lært en smule af eksemplerne. :)

PeterBodker
Begynder
Indlæg:14
Tilmeldt:26. okt 2013, 14:29

Re: Mouseover pop up

Indlæg af PeterBodker » 2. nov 2013, 13:14

PERFEKT! Mange tak! og ja du har ret, det er en meget federe "feature" at man skal trykke på knappen inden. Tak for god læring og hjælpsomhed :-) Fedt forum!

PeterBodker
Begynder
Indlæg:14
Tilmeldt:26. okt 2013, 14:29

Re: Mouseover pop up

Indlæg af PeterBodker » 16. nov 2013, 11:24

Det passer ikke godt ind på min side desværre.

Kan du/i hjælpe mig med en anden løsning. Gerne den samme som på følgende link, ude i siden hvor der står "Gratis levering", når man trykker på den knap, så kommer der et pop up billede op, uden at man forlader siden :-)
På mit skal det bare være på et link, altså bare en tekst med ahref.

Link: http://www.smartguy.dk/cart?pid=210836&vid=42218020

Håber meget i kan hjælpe mig og være ret punktlig, som tidligere indlæg, det lærte jeg meget af! :-)

- Peter

PeterBodker
Begynder
Indlæg:14
Tilmeldt:26. okt 2013, 14:29

Re: Mouseover pop up

Indlæg af PeterBodker » 20. nov 2013, 16:39

Jeg står seriøst og mangler hjælp til dette! Er der nogen der kan hjælpe?

Besvar