Div oplichten na gevonden/CTRL-F

Status
Niet open voor verdere reacties.
E

erict21

Gebruiker
Lid geworden
10 jan 2009
Berichten
7
Ik ben hier al wekenlang mee aan het stoeien maar het lukt me helaas echt niet.
Met dit bericht gooi ik de welbekende handdoek in de ring.
Misschien dat iemand een oplossing weet?

Ik heb op een pagina een heeeeleboel div-jes. Die divjes bevatten een klein gifje en staan allemaal op één pagina. Omdat alléén de gif zichtbaar mag zijn wordt deze div over een andere div heen geplaatst.
De onderliggende div bevat een naam over dit gifje, bijv Kees, jantje, pietje (maar is dus niet zichtbaar).
Kortom, als je alle divjes/gifjes ziet op de pagina, heb je dus geen idee welke naam er bij dit gifje hoort. En dat moet ook juist zo blijven!

Nu wil ik heel graag het zo kunnen maken dat je met CTRL-F een zoekfunktie kan doen op bijv. "Pietje".
Als ik dat doe wordt dat ook inderdaad gevonden en gemarkeerd.
Alleen........je ziet dat dus niet.......
(ik weet dat dit zo is, want als ik de div met de naam bovenop leg, komt dat naar voren).

De vraag:
Is er nu een of andere manier te verzinnen met javascript waardoor de div oplicht als reactie op het gemarkeerde (zeg maar zoiets als "onMarked", maar dat bestaat niet)?



Ik heb het al wel zover dat ik het met onFocus voor elkaar krijg. Ik zal dat even hier onder zetten als antwoord zo....
 
Laatst bewerkt:
HTML: 
<head>
<title>Test example</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<style type="text/css" media="all">

label {
	float: left;
	width: 5em;
}

div{
	width: 15em;
	border: 2px solid;
	border-color: #666 #ddd #ddd #666;
}

div:focus, div.sffocus {
	background: #cfc;
	border-color: #090;
}

</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--
function ShowPopup(hoveritem)
{
var hvpu= "hoverpopup"+nr;
hp = document.getElementById(hvpu);

// Set position of hover-over popup
hp.style.top = hoveritem.offsetTop + y;
hp.style.left = hoveritem.offsetLeft + x;

// Set popup to visible
hp.style.visibility = "Visible";
}

function HidePopup()
{
var hvpu= "hoverpopup"+nr;
hp = document.getElementById(hvpu);
hp.style.visibility = "Hidden";
}

function showBackground(url)
{
window.open(url,"_self","height=700,width=1000,left=10,top=10,resizable=no,scrollbars=no,toolbar=no,status=yes"); 
}



sfFocus = function() {
	var sfEls = document.getElementsByTagName("DIV");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onfocus=function() {
			this.className+=" sffocus";
		}
		sfEls[i].onblur=function() {
			this.className=this.className.replace(new RegExp(" sffocus\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfFocus);

//--><!]]></script>

</head>

<body>


<a id="hoverover16" style="text-decoration:none; cursor:default;" onMouseOver="ShowPopup(this,y=284,x=482,nr=16);" onMouseOut="HidePopup();">
<div class="gif30 style1" style="line-height: 13px; margin-left: 782px; margin-top: 234px; background-image: url(../../images/gifjes/image2.gif);color:#00FF00;" >

</div>

<div id="hoverpopup16" style="text-decoration:none; visibility:hidden; position:absolute; left:482px; top:284px; z-index: 2;">
<div class="gif3 style1" >
<div class="gif4" style="color:#000000;background-image: url(../../images/image2.png);" onFocus>
<br><br><br><br><br><br><br><br><b>Pietje<br></b><br>
</div>
<div class="special" style="color:#FF0000"><br></div>
</div>
</div>
</div>
</a>

</body>
 
zkie dat ik een denkfoutje heb gemaakt.
De tekst "Pietje" hierboven staat namelijk niet in de kleine div, maar in de pop-up div.

En daarmee is javascript niet meer van toepassing
(overigens wel een manier voor transparante tekst, maar dat hoort hier weer niet thuis).
Topic kan worden gesloten dus eigenlijk....

Mes excuses.... :(
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan