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

01/11

Test af Apple Watch Series 10: Apples jubilæums-model er blevet lidt af en mester af det hele

01/11

Google Clouds netop fratrådte topchef har fundet sit nye job: Bliver en af de mest magtfulde personer hos ServiceNow

01/11

Nu går OpenAI efter struben på Google: ChatGPT fungerer nu også som en AI-søgemaskine

01/11

Nørgaard: Agenterne kommer, og jeg er klar: Måske bliver min gamle drøm snart virkelighed

01/11

Staten vil selv udvikle kæmpe it-system til 650 millioner kroner: Nu tvinges regeringen til at lægge vigtige dokumenter frem

01/11

Det går fantastisk på det danske Dynamics-marked: NNIT-selskabet Scales kan vælge og vrage mellem opgaver

01/11

Linus Torvalds giver russiske Linux-udviklere sparket: Vil ikke have noget med dem at gøre

01/11

Skelsættende GDPR-sag ændrer definitionen af 'følsomme oplysninger'

01/11

Google indlemmer sin AI Gemini i Google Maps, Google Earth og Waze: Det kommer det til at betyde

01/11

Microsoft: Tvungen skift til Windows 11 kan udskydes med et år, hvis du betaler os 200 kroner

01/11

Sådan blev Margrethe Vestager ’Silicon Valleys største fjende’

Vis flere artikler

IT-JOB

TV2

Software Engineer, Integrations

Unik System Design A/S

Ansvarlig UX’er med grafisk talent søges

Unit IT

Senior Data Platform Consultant

Cohenware ApS

.NET Backend Developer

Blue Dock ApS

IT-konsulent med partnerdrømme

Vis flere jobs

Seneste spørgsmål Seneste aktivitet

I dag 06:10	Excel åbner fil i kæmpe format Af Aske i Excel
I går 22:00	Datafordeler Af Lsk i PHP
I går 12:37	Summere beløb pr. dato Af TTA i Excel
31/1022:44	Tilslutte chassic fans Af viking69 i PC
31/1020:28	LED lysstofrør Af ErikHg i Fri debat