CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede agersten Nybegynder
26. oktober 2007 - 17:14 Der er 31 kommentarer og
1 løsning

mouse over billede skal blive til tekst. Frontpage

Hej gæve Eksperter!

Jeg er ved at arbejde lidt på et nyt design. På min indgangsside er der tre billeder, når kan holder musen over, skal der komme en tekst frem.
http://img.photobucket.com/albums/v203/Agersten/Julie-Agersten-1.gif
dette er et billede af forsiden. første billede skal fx forsvinde og der skal komme "photography" frem i stedet og meget gerne på en elegant måde ved mouse over! :)

takker på forhånd!!

Julie
Avatar billede soerenlyn Nybegynder
26. oktober 2007 - 17:23 #1
<script type="text/javascript">
function ToggleImg(obj){
  obj.getElementsByTagName('img')[0].style.display = obj.getElementsByTagName('img')[0].style.display == 'inline' ? 'none' : 'inline';
  obj.getElementsByTagName('span')[0].style.display = obj.getElementsByTagName('img')[0].style.display == 'inline' ? 'none' : 'inline';
}
</script>

<div onmouseover="ToggleImg(this);" onmouseout="ToggleImg(this);">
<img style="display:inline;">
<span style="display:none;">Tekst..</span>
</div>
Avatar billede soerenlyn Nybegynder
26. oktober 2007 - 17:23 #2
jeg tror det ville virke nogenlunde sådan :)
Hvis du har et andet element rundt om dit billede, så kan du bare putte det på det ..
Avatar billede soerenlyn Nybegynder
26. oktober 2007 - 17:24 #3
Vupsi .. ahvde ikke set du skrev frontpage :)
Men hvis du går ind i HTML-koden og indsætter det, burde det stadig virke..
Avatar billede w13 Novice
26. oktober 2007 - 17:25 #4
Hej Julie.

Skal vi så finde på den elegante måde? :)

Jeg ville umiddelbart sige noget à la:
--------------------------------------
<script type="text/javascript">
function ReplaceImgWithText(elm,id){
id=document.getElementById(id);
elm.style.display=elm.style.display=="none"?"inline":"none";
id.style.display=id.style.display=="none"?"inline":"none";
}
</script>

<img src="billede.jpg" onmouseover="ReplaceImgWithText(this,'text1')" onmouseout="ReplaceImgWithText(this,'text1')">

<div id="text1" style="display:none">Tekst her</div>
----------------------------------------------------
Der kan så lægges elegant CSS på div'en :)
Avatar billede w13 Novice
26. oktober 2007 - 17:26 #5
Ahr, din løjser Søren. Du var hurtigere, og jeg glemte at rette et par ting i min.
Avatar billede agersten Nybegynder
26. oktober 2007 - 18:52 #6
takker for jeres svar! nu har jeg lagt min test online - dén af jer der først får bøjet i neon, hvor jeg sætter det ind, for pointne! men jeg advarer, for jeg må nok have lidt hjælp til at få det hele indsat rigtigt før det virker, er sgu ikke så sej til det ;)
http://www.julie-agersten.dk/test.htm
Avatar billede soerenlyn Nybegynder
26. oktober 2007 - 19:22 #7
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<TITLE>Julie Agersten.dk - Horsephotographer</TITLE>
<META NAME="Description" CONTENT="Horsephotographer/ Hestefotograf Julie Agersten: Julie-Agersten.dk indeholder primært billeder af fuldblodsarabere bla billeder af mine heste samt billeder fra div shows fx All Nations Cup 05.">
<meta name="Keywords" content="julie agersten, photography, turban stud, nikon ">
<META NAME="Copyright" CONTENT="julie agersten">
<META NAME="Robots" CONTENT="INDEX,NOFOLLOW">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="false">
<link rel="shortcut icon" href="Images/favicon.ico">

<style type="text/css">
.style1 {
    border-left-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 0px;
    margin-right: 0px;
}
.style2 {
    border-style: none;
    border-width: medium;
}
.style4 {
    text-align: center;
    white-space: nowrap;
}
.style5 {
    margin-left: 0px;
}
.style6 {
    border-left-style: none;
    border-left-width: medium;
}
.style7 {
    background-image: url('Images/Baggrunde/Julie-Agersten.jpg');
}
</style>
<script type="text/javascript">
function ToggleImg(obj){
  obj.getElementsByTagName('img')[0].style.display = obj.getElementsByTagName('img')[0].style.display == 'inline' ? 'none' : 'inline';
  obj.getElementsByTagName('span')[0].style.display = obj.getElementsByTagName('img')[0].style.display == 'inline' ? 'none' : 'inline';
}
</script>
</head><body>
<div id="main2">
<table style="height:100%;width:100%;"><tbody><tr><td>

<table border="0" cellpadding="0" cellspacing="0" style="width:966px; height:502px; margin:0px auto;" class="style7">
  <tbody><tr>
    <td valign="top" style="width: 111px; height: 92px">
    <!-- MSCellType="DecArea" -->
    </td>
    <td valign="top" style="height: 92px">
    <!-- MSCellType="ContentHead" -->
    </td>
  </tr>
  <tr>
    <td valign="top" style="width: 111px">
    <!-- MSCellType="NavBody" -->
    <div>
</div>

    </td>
    <td height="367" valign="top" width="790">
    <!-- MSCellType="ContentBody" -->
    <table style="width: 100%" class="style1">
    <tr>
        <td style="height: 329px; width: 349px" class="style2">
        <table style="width: 100%">
            <tr>
                <td class="style4" style="width: 26px">&nbsp;</td>
                <td class="style4" style="width: 52px" onmouseover="ToggleImg(this);" onmouseout="ToggleImg(this);">
                <img src="Images/Baggrunde/Ramino.jpg" width="198" height="198" class="style5">span style="display:none;">Tekst..</span></td>
            </tr>
        </table>
        </td>
        <td style="height: 329px; width: 357px" class="style2">
        <table style="width: 100%">
            <tr>
                <td style="width: 162px">
                <img src="Images/Baggrunde/Sesse.jpg" width="198" height="198"></td>
            </tr>
        </table>
        </td>
        <td style="height: 329px; width: 428px" class="style6">
        <table style="width: 100%">
            <tr>
                <td style="width: 234px">
                <img src="Images/Baggrunde/Mocca.jpg" width="198" height="198"></td>
                <td>&nbsp;</td>
            </tr>
        </table>
        </td>
        <td style="height: 329px; width: 208px">&nbsp;</td>
    </tr>
    </table>
    </td>
  </tr>
</tbody></table>

<font color="#CCCCCC">

</div>

</font>

<p style="text-align:center;margin-top:40px;">&nbsp;</p>

</td></tr></tbody></table>
</body></html>
Avatar billede soerenlyn Nybegynder
26. oktober 2007 - 19:23 #8
Dette burde gøre det .... Der mangler en '<' der i koden hvor der står "span>"...
så det bliver:

<img src="Images/Baggrunde/Ramino.jpg" width="198" height="198" class="style5"><span style="display:none;">Tekst..</span></td>
Avatar billede agersten Nybegynder
26. oktober 2007 - 19:44 #9
Så har jeg sat det ind, men det er ikke helt godt. Det første billede forsvinder bare, og så rykker de to andre til siden.
du kan lige prøve at se C:\Users\Jules\Documents\Mine websteder\test.htm

egentlig tænkte jeg, om det ville være bedre/ lettere at "toggle" mellem to billeder, i stedet for billede og tekst?
for så laver jeg et billede med "photography" i PS... Så kan jeg også lave det med den skrifttype, jeg gerne vil have og stadig sikre mig, alle kan se den.
Og sidst men ikke mindst: hvordan får jeg lavet "photography" til et link, så brugeren kan gå ind på siden?
Avatar billede soerenlyn Nybegynder
26. oktober 2007 - 19:53 #10
det er nemmere hvis du har to billeder.. Jeg laver lige koden til du har to billeder :)
Avatar billede agersten Nybegynder
26. oktober 2007 - 19:54 #11
super, takker!! :D
Avatar billede soerenlyn Nybegynder
26. oktober 2007 - 19:56 #12
function ToggleImg(obj){
  obj.getElementsByTagName('img')[0].style.display = obj.getElementsByTagName('img')[0].style.display == 'inline' ? 'none' : 'inline';
  obj.getElementsByTagName('span')[0].style.display = obj.getElementsByTagName('img')[0].style.display == 'inline' ? 'none' : 'inline';
}

Dette skal bare fjernes. Og så skal dette ændres:

<td class="style4" style="width: 52px" onmouseover="ToggleImg(this);" onmouseout="ToggleImg(this);"><img src="Images/Baggrunde/Ramino.jpg" width="198" height="198" class="style5">span style="display:none;">Tekst..</span></td>

til:

<td class="style4" style="width: 52px"><a href="dit link her.."><img src="Images/Baggrunde/Ramino.jpg" width="198" height="198" class="style5" onmouseover="this.setAttribute('src','dit andet billede')" onmouseout="this.setAttribute('src','Images/Baggrunde/Ramino.jpg')"></a></td>
Avatar billede soerenlyn Nybegynder
26. oktober 2007 - 19:56 #13
Prøv at se om det virker :)
Avatar billede agersten Nybegynder
26. oktober 2007 - 20:25 #14
det virker :) men den laver en farvet ramme omkring, selvom jeg har skrevet, det skal være sort? vil det være let at indsætte en kode, sådan så der er en glidende overgang mellem de to? ;)

jeg skal nok stoppe med flere spørgsmål, så du kan nyde din fredag aften ;)
Avatar billede soerenlyn Nybegynder
26. oktober 2007 - 20:45 #15
hvordan farver ramme? omkring billedet?

Hvordan glidende? Noget der fader?
Avatar billede agersten Nybegynder
26. oktober 2007 - 20:54 #16
http://www.julie-agersten.dk/test.htm du kan se en lilla ramme omkring billedet med linket, men har har bedt den om at lave aktivt link sort, så jeg forstår det ikke.

Jep fade mellem de to billeder :)
Avatar billede soerenlyn Nybegynder
26. oktober 2007 - 21:03 #17
Du kan i din css-kode skrive:

img{border:0;}

Det burde løse det. Jeg vender tilbage om lidt med den fadefunktionen :)
Avatar billede w13 Novice
26. oktober 2007 - 21:07 #18
Hvis den skal være sort, burde du også kunne:

img{border-color:#000000}

Hvis det ikke virker, er det fordi links-css'en overgår denne.
Avatar billede agersten Nybegynder
26. oktober 2007 - 21:13 #19
den sidste virker, tak :)
Avatar billede soerenlyn Nybegynder
26. oktober 2007 - 21:22 #20
Prøv at tilføje dette:

<script type="text/javascript">
var opacity=100;
var box;
var imgsrc;
function FadeIn(){
    box.style.filter="alpha(opacity="+opacity+")";
    box.style.MozOpacity=opacity/100;
    box.style.opacity=opacity/100;
    box.style.Opacity=opacity/100;
    opacity+=2;
    if(opacity<=100){setTimeout("FadeIn()",2)}
}
function FadeOut(){
    box.style.filter="alpha(opacity="+opacity+")";
    box.style.MozOpacity=opacity/100;
    box.style.opacity=opacity/100;
    box.style.Opacity=opacity/100;
    opacity-=2;
    if(opacity>=50){setTimeout("FadeOut()",2)}
    else{box.setAttribute("src",imgsrc);FadeIn();}
}
</script>


Dernæst skal onmouseover og onmousseout ændres til:

onmouseover="box=this;imgsrc='Images/Baggrunde/photography.jpg';FadeOut();" onmouseout="imgsrc=Images/Baggrunde/Ramino.jpg';FadeOut();"
Avatar billede soerenlyn Nybegynder
26. oktober 2007 - 21:24 #21
Denne funktion kan du også kalde på de andre billeder, hvis du bare kopiere onmouseover og onomuseout. Hvis du undrer dig over hvorfor der er så mange forskellige opacity i funktionen, er det fordi den bl.a. både i Internet Explorer, Firefox, Seamonkey, Safari, Opera, Netscape :)
Avatar billede soerenlyn Nybegynder
26. oktober 2007 - 21:24 #22
Prøv at tjek om det virker.
Avatar billede agersten Nybegynder
26. oktober 2007 - 21:37 #23
cool, det ser fint ud på min skærm :) har ikke lagt det op, men det er super, så smid du bare et svar! :D
Avatar billede soerenlyn Nybegynder
26. oktober 2007 - 21:42 #24
Det var godt. Altid er altid rart når det man laver virker! :)
Avatar billede agersten Nybegynder
26. oktober 2007 - 21:45 #25
tusind tak for hjælpen og fortsat god weekend! :D
Avatar billede soerenlyn Nybegynder
26. oktober 2007 - 21:47 #26
I lige måde!

Jeg vil med glæde hjælpe en anden gang :)
Avatar billede agersten Nybegynder
26. oktober 2007 - 22:05 #27
tak :) så vil jeg være belastende med det samme : onmouseout virker sgu ikke... :( så hvis du får tid, må du meget gerne komme med et forslag! :)
Avatar billede w13 Novice
26. oktober 2007 - 22:21 #28
Søren mangler en apostrof:

onmouseout="imgsrc='Images/Baggrunde/Ramino.jpg';FadeOut();"
Avatar billede soerenlyn Nybegynder
26. oktober 2007 - 22:32 #29
Hov, virker det med apostrofen ?
Avatar billede agersten Nybegynder
26. oktober 2007 - 22:43 #30
yes sirs, det var bare det *GG* tak igen ;)
Avatar billede soerenlyn Nybegynder
26. oktober 2007 - 23:07 #31
Ja - tak Hr. web13 :D
Avatar billede w13 Novice
26. oktober 2007 - 23:30 #32
Jamen det var da så lidt, Hr. Søren Lyn.
Avatar billede 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.

Loading billede Opret Preview
Kategori
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
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
Ajax - indlæs webside og derefter hente data Af nemlig i JavaScript 4 21/05/202417:19 22/06/202422:07
Disable button efter 1. klik Af nemlig i JavaScript 2 05/05/202415:37 05/05/202416:25
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 18:09 Kan ikke fildele fra PC til PC Af gertLundberg i LAN/WAN
I går 17:33 Facebook kopier en tråd Af clausito i Sociale medier
I går 09:49 Indtogs sejlads : OL i Paris : Hvornår kom Danmark ? Af Ikke-ekspert i Fri debat
I går 03:28 Inkasso som privat? Af lekor adams i Fri debat
26/0723:51 Frossen cursor Af goglov i PC
White papers
Flere white papers »


Premium
Teaser billede
Nordjyske MapsPeople ruster op til opkøb af konkurrenter: "Vi vil vinde det her kapløb"
Læs mere »
Microsoft tager til genmæle: Vores licenspraksis skaber ikke unfair konkurrence
Færre unge studerende på landets it-uddannelser: "Vi afviser dem der, hvor de har lyst til at læse"
Overblik: Sådan forløb årets største databrud - mindst 165 organisationer ramt
Se alle »
Computerworld
Teaser billede
Elon Musk dropper CrowdStrike efter kæmpe nedbrud
Læs mere »
Apples spritnye app til kodeord kommer til iOS 18: Sådan virker den
Med SearchGPT har verden fået en spritny søgemaskine: Kan den true Googles dominans?
Apples folde-iPhone tager form: Her er planerne
Se alle »
CIO
Teaser billede
Så mange Microsoft-enheder blev ramt af gigantisk Crowdstrike-koks
Læs mere »
Telenor skrotter ældre it-system: Nyt system er en hyldevare
Derfor står Danske Bank foran en kæmpe AWS-transformation: Ellers skulle vi bygge en ny infrastruktur for at følge med
Microsoft kaster milliardbeløb efter nye tiltag til partnerprogrammet: Partnerne kan nu tjene endnu flere penge
Se alle »
Job & Karriere
Teaser billede
Efter 12 år er NNIT's hovedkvarter i Søborg nu ryddet og tomt - alle arbejder hjemme: "Det er med et vist vemod"
Læs mere »
Dansk top-profil trækker sig fra Microsoft: Skal være direktør i TDC Erhverv
KMD-direktør forlader selskabet: Det skal hun nu
IBM Danmark skifter ud i sin øverste ledelse - her er den nye direktion
Se alle »
White paper
Teaser billede
Sæt turbo på din cloudperformance og minimér risikoen for DDoS-angreb
Læs mere »
Sådan høster du forretningsfordelene ved Internet of Things
Det behøver ikke at gøre ondt: Sådan gør du livet lettere for kunder med multicloud
Få mere ud af din cloudinfrastruktur og gør op med de konstant stigende omkostninger
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »