CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

buttersi Nybegynder

02. august 2008 - 18:49 Der er 8 kommentarer

Vis tekst ved mouseover

Hej folkens,

Jeg er ikke sikker på det er den rigtige kategori, men nu prøver jeg.

Jeg skal have lavet en effekt så når man holder musen over et billede skal der komme en boks frem med tekst. Har lavet et eksempel i kan se her: http://billedeupload.dk/showpic-3270.jpg

Er der en nem måde at lave det her på?

På forhånd tak!

Synes godt om

olebole Juniormester

02. august 2008 - 19:25 #1

<ole>

Det kunne være noget i denne stil:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Exp test</title>
<style type="text/css">
.mOverPicHolder {
position: relative;
}
.mOverPicHolder span {
position: absolute;
width: 100%;
left: 0;
top: 50%;
margin-top: -1em;
font: bold 18px arial, sans-serif;
text-align: center;
}
</style>
<script type="text/javascript">
function setInfo(oPic, bEmpty) {
var oInfo = oPic.parentNode.getElementsByTagName("span")[0];
oInfo.firstChild.nodeValue = bEmpty ? "\u00a0" : oPic.getAttribute("alt");
}
</script>
</head>
<body>

<div>

<span class="mOverPicHolder" style="width:104px;height:110px">
<img onmouseover="setInfo(this)" onmouseout="setInfo(this, true)" alt="En tekst" title=""
src="http://www.eksperten.dk/img/elogo.png"
style="width:104px;height:110px"><span> </span></span>

</div>

</body>
</html>

/mvh
</bole>

Synes godt om

buttersi Nybegynder

02. august 2008 - 19:36 #2

Det virker fint, men hvis jeg kun kan skrive teksten i "alt" så kan jeg vel ikke få teksten ind i en boks?

Synes godt om

olebole Juniormester

02. august 2008 - 21:20 #3

Nej, men et eller andet sted skal teksten jo komme fra - og jeg har ingen somhelst idé om mulighederne i din applikation ... jeg kan kun se et billede =)

Synes godt om

buttersi Nybegynder

02. august 2008 - 21:29 #4

Altså det jeg har i tankerne er at når jeg holder musen over et billede, skal der komme en boks magen til den i mit screenshot frem. Boksen skal have en opacity effekt på som jeg ikke ved om er muligt at lave i html/css/javascript, så skal der være plads til en titel som skal have et link på sig. og så antal visninger billedet har fået og dens rating.

Synes godt om

helsekost Nybegynder

02. august 2008 - 22:40 #5

Jeg ville foretrække at gå uden om JavaScript og lave det hele vha. CSS

HTML'en kunne se sådan ud:
<div class="billed">
<img>
</img>
<div class="titelboks">
<h2>Titel</h2>
<p>Tekst</p>
<img></img> (5 STJERNER)
</div>
</div>

Så skal stylesheetet indeholde minimum:
div.billed div.titelboks {
visibility: hidden;
}
div.billed:hover div.titelboks {
visibility: visible;
}

For at få det til at lige dit screenshot, kræver det selvfølgelig lidt mere CSS. Boksen skal gøres gennemsigtig (http://www.w3schools.com/Css/css_image_transparency.asp), og flyttes hen over billedet (http://www.w3schools.com/Css/css_positioning.asp)

Hvis du vil bruge JavaScript. Så kalder man det vist "tooltip" (hvis du vil søge efter det). De fleste tooltip-koder er dog lavet så boksen følger musen.

Synes godt om

olebole Juniormester

02. august 2008 - 23:45 #6

Jeg udelukker ingenlunde, det kan lade sig gøre med CSS, men da det strider mod idéen med CSS at bruge det til funktionalitet, er det en evig tilbagevendende diskusion, hvad man skal bruge til hvad. Personligt foretrækker jeg at opdele koden logisk, så CSS bruges til 'visualitet' - og script til funktionalitet ;o)

Det vil nok ikke være smart at give tekstboksen transparens, da teksten jo så får samme transparens ;o)

Synes godt om

olebole Juniormester

02. august 2008 - 23:46 #7

- og så kræver din løsning jo også, at browseren understøtter hover på andet end a-elementer

Synes godt om

buttersi Nybegynder

03. august 2008 - 00:19 #8

Det lyder som noget af en opgave jeg har sat mig for :|

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

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
Sæt vindue størrelse Af poulmadsen i JavaScript	1	08/10/202417:18	13/10/202412:33
Opgavestyring Af ingeman i JavaScript	1	15/09/202416:06	15/09/202420:40
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS