URL verbergen

[Wapser]

Hoi,

Ik wil graag het "url adres" van de links op mijn site verbergen, dus dat de bezoekers linksonderin het scherm ipv "index.htm" alleen Index of Home zien.
Ik weet dat je dat bij een simpele link als volgt kunt doen:

<a href="index.htm" onMouseOver="self.status='Home'; return true" onmouseout="self.status="; return true">HOME</a>



Nu heb ik echter ook een aantal links op mijn site waar een scriptje achter zit. (Als je met je muis eroverheen gaat verandert de kleur van de knop (jpg plaatje).

Dit zit er als volgt uit:

<script language="JavaScript">
<!--

if (document.images) {

var homeoff = new Image();
homeoff.src = "../plaatjes/button.JPG";
var homeon = new Image();
homeon.src = "../plaatjes/button2.JPG";
}

function act(imgName) {
if (document.images)
document[imgName].src = eval(imgName + "on.src");
}

function inact(imgName) {
if (document.images)
document[imgName].src = eval(imgName + "off.src");
}

// -->
</script>

<a href="index.htm" onMouseOver="act('home')" onMouseOut="inact('home')" onMouseClick><img border="0" src="../plaatjes/button.JPG" name="home" width="45" height="45">


Hoe kan ik bij deze laatste link ook de url verbergen zodat als je daaroverheen gaat ook alleen "Home" ziet, ipv "index.htm"?

 

[raycko]

<a href="index.htm" onMouseOver="act('home')" onMouseOut="inact('home')" onMouseClick><img border="0" src="../plaatjes/button.JPG" name="home" width="45" height="45">Hier tekst van de Link </a>
Als ik het goed heb (lang geleden) komt hierdoor de tekst waar staat Hier tekst van de link onder het plaatje te staan en blijft je script intact. Zoniet weg even zal ik even goed kijken.

 

[Wapser]

Dat is niet wat ik bedoel, ik wil geen tekst IN de link want ik gebruik een plaatje als "knop".

Bij een normale link zie je linksonderin je scherm altijd het adres waar de link heen gaat op het moment dat je met je muis over de betreffende link heen gaat
Zie dit stukje van www.startpagina.nl:

Door de html-code van de link op de volgende manier aan te passen kan je als websitebouwer zelf weten wat er komt te staan.
In dit geval het woordje "Home", zie volgend plaatje:

De link ziet er dan in HTML als volgt uit:
<a href="index.htm" onMouseOver="self.status='Home'; return true" onmouseout="self.status="; return true">HOME</a>

Vervang "Home" uit het stukje "self.status'='Home' door wat je wilt dat er komt te staan.

Mijn vraag is echter:
Hoe kan ik deze techniek toepassen in combinatie met het scriptje waarin ik ook al een MouseOver gebruik?

 

[raycko]

hahah had dat dan eerder gezegt nu snap ik je vraag tenminste dankje voor die screenshots erbij maakte het veel duidelijker
Als het goed is moet zo alles werken! heb zelf getest dus hoop dat die zo goed zit zoniet laat even weten kan een typfoutje hebben gemaakt

succes:thumb:

<script language="JavaScript"> 
<!--

if (document.images) {

var homeoff = new Image();
homeoff.src = "../plaatjes/button.JPG";
var homeon = new Image();
homeon.src = "../plaatjes/button2.JPG";
}

function act(imgName) {
if (document.images) 
document[imgName].src = eval(imgName + "on.src");
}

function inact(imgName) {
if (document.images)
document[imgName].src = eval(imgName + "off.src");
}

// -->
</script>

<a href="index.htm" onMouseOver="act('home'); self.status='Home'; return true" onMouseOut="inact('home'); self.status=''" onMouseClick><img border="0" src="../plaatjes/button.JPG" name="home" width="45" height="45">

 

[csshunter]

Hoi Wapser,
Ik denk eigenlijk dat je beter het hele javascript voor het plaatjeswisselen gewoon kan vergeten. Dit kan je eenvoudig regelen met css. Daarmee kan je namelijk een achtergrond-figuur automatisch laten wisselen als er over een link gehoverd wordt. Dit is uitest geschikt voor bv. een menu, dan heb je zelfs maar 1 plaatje nodig voor alle buttons plus alle buttons als je eroverheen gaat.

• Een voorbeeld-pagina zit hier:
  http://home.tiscali.nl/developerscorner/css-discuss/test-jakob-nav.htm
• Een artikeltje zit hier:
  http://home.tiscali.nl/developerscorner/port-hole/knoppenblok.htm

En een paar opm. bij het script van hierboven:

<script language="JavaScript">

moet zijn:

<script type="text/javascript">

Het ziet er uit als een nogal oud script: in plaats van de (document.images) methode is er tegenwoordig het universele Document Object Model (DOM) waarmee alles op een webpagina gevangen kan worden.

Return true?

<a href="index.htm" onMouseOver="act('home'); self.status='Home'; return true" ...>

Ik heb dit geval niet getest, maar ik dacht dat "return true" bij een javascript op een link betekent: "doe het javascript, en doe daarna waar de link naar toe gaat". Zo werkt het tenminste bij een onclick="scriptje(); return true;" opdracht.
Als dat ook bij een onmouseover werkt, reageert de onmouseover dus met een automatische klik op de link.
Nog voor je goed en wel de hover-button hebt kunnen zien.

Er straat trouwens nog een loos onMouseClick-attribuut (zonder waarde) bij de link. Dat kan gewoon geschrapt.
- En mocht je ooit voor iets een klik op de muis nodig hebben, maak er dan onclick="scriptje()" van in plaats van onMouseClick="scriptje()". Dan kunnen bezoekers die geen muis (kunnen) gebruiken, maar met de Tab-toets naar een link gaan, deze ook in gang zetten door op de Enter-toets te klikken. Anders is voor hen de link ontoegankelijk!

Maar, als gezegd, met css ben je van alles af. En je kan voor de statusbalk-tekst gewoon het script-regeltje gebruiken wat je al had.
Voordelen:

• bij uitgeschakeld javascript zien mensen ook het veranderde plaatje bij hover;
• je kan met veel minder plaatjes toe, door het combineren ervan (= grote snelheidswinst voor de pagina);
• de html wordt een stuk overzichtelijker.

Met vriendelijke groet,
CSShunter