Archief - IMG-map & Mouseover

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
L

LeSec

Legacy Member
Hallo,

Ik ben al een hele tijd niet meer bezig geweest met html (jaren geleden ondertussen) en ben nu opnieuw wat begonnen. Vroeger werkte ik vaak met imgmaps, ik weet niet of dit nu nog vaak gebruikt wordt en wat de eventuele alternatieven kunnen zijn.

Ik ben momenteel bezig aan een indexsite die moet doorlinken naar twee verschillende subsites.

Ik zal misschien aan de hand van de afbeeldingen duidelijk maken wat er zou moeten gebeuren.

Openingscherm
Vrij duidelijk, dit is wat men te zien krijgt bij openen site.

Als men dan met muis over een van de namen gaat moet men een van onderstaande afbeeldingen te zien krijgen naar gelang de gekozen naam én moeten ze ook elk apart doorlinken bij klikken naar de subsite.

Keuze 1
zou dan moeten doorlinken naar domeinnaam/yannick

Keuze 2
zou moeten doorlinken naar domeinnaam/stef

Ik heb er geen flauw benul van wat er tegenwoordig de handigste en meest gangbare manier is om dit op te lossen. We hebben zelfs aan flash gedacht maar dat lijkt me wat overkill en tzou me verbazen moest dit niet eenvoudig via html/css gaan?

Iemand die raad weet?
Alvast bedankt!
a

adrianhates

Legacy Member
ik zou met verschillende afbeeldingen werken en die dan plaatsen met css.

Als je dan hovert over een naam met javascript de src van da logo met die streepjes veranderen.

(snel bedacht :D)
L

LeSec

Legacy Member
adrianhates zei:
ik zou met verschillende afbeeldingen werken en die dan plaatsen met css.

Als je dan hovert over een naam met javascript de src van da logo met die streepjes veranderen.

(snel bedacht :D)
Klik om te vergroten...

Ja dat is de bedoeling ook!
Kheb die 3 afbeeldingen al klaar.
Kweet gewoon totaal niet hoe ik dat in code moet omzetten..
Dat was de vraag :)

maar toch al bedankt!
a

adrianhates

Legacy Member
<img src="https://www.beyondgaming.be/forums" onmouseover="document.getElementById('logo').src='images/afbeelding2';" onmouseout="document.getElementById('logo').src='images/afbeelding1'" alt="naam" />
b

brecko

Legacy Member
Google eens op jQuery image replacement..
Moet lukken door het attribuut source van uw img te laten veranderen.

Edit: @hierboven, lukt natuurlijk ook, maar is niet al te proper hé.
L

LeSec

Legacy Member
Heb eens gezocht op die jQuery en ben op volgende site gestoten..

JQuery HowTo: jQuery image swap or How to replace an image with another one using jQuery

Lijkt me geschikt te zijn. Probleem is dat ik dus langs de kanten weet waar of hoe ik dat moet inpassen.

Code: 
<img src="openingsscherm.jpg" alt="index" width="xxx" height="xxx" border="0" usemap="#map1" />
<map name="map1" id="map1">
<area shape="rect" coords="blablaxxx" href="keuze1.html" target="_blank" alt="Keuze 1" />
<area shape="rect" coords="blablaxxx" href="keuze2.html" target="_blank" alt="Keuze 2" />
</map>

Dat heb ik nu, nu moet ik die jQuery ding daar ergens zien in te passen veronderstel ik?
a

adrianhates

Legacy Member
brecko zei:
Google eens op jQuery image replacement..
Moet lukken door het attribuut source van uw img te laten veranderen.

Edit: @hierboven, lukt natuurlijk ook, maar is niet al te proper hé.
Klik om te vergroten...

is properder als met jquery werken aangezien het maar 3 regels code zijn.

als je met jquery werkt , moet je nog eens 50 kb aan javascript code inladen ook.
j

j design

Legacy Member
Ik ben ook wel niet zo een fan van inline JS

Kunt ge het niet me css en transparante png's doen?
Dus met een paar links over elkaar zogezegd en dan met css uw achtergrond-afbeelding laten veranderen naar de gekleurde.

Zet eens een link naar je bestand met layers. Dan wil ik het wel eens proberen.
b

brecko

Legacy Member
adrianhates zei:
is properder als met jquery werken aangezien het maar 3 regels code zijn.

als je met jquery werkt , moet je nog eens 50 kb aan javascript code inladen ook.
Klik om te vergroten...

Tagsoep is zowiezo not done.
En dat je slechts drie regeltjes hebt, is hier helemaal geen argument om properheid te staven. Opsplitsen is zowiezo properder.

@ Messenjah: als er hier straks nog geen oplossing gegeven wordt, zal ik wel even iets schrijven.
Eerst nog wat werk met mijn herexamen, dus kan nog even duren.
L

LeSec

Legacy Member
brecko zei:
Tagsoep is zowiezo not done.
En dat je slechts drie regeltjes hebt, is hier helemaal geen argument om properheid te staven. Opsplitsen is zowiezo properder.

@ Messenjah: als er hier straks nog geen oplossing gegeven wordt, zal ik wel even iets schrijven.
Eerst nog wat werk met mijn herexamen, dus kan nog even duren.
Klik om te vergroten...

Ok bedankt al!
Zit geen haast achter hoor, doe maar wanneer je tijd hebt!

Kheb ondertussen toch al iets nieuw geleerd, die jQuery kende ik nog niet!
b

brecko

Legacy Member
The_Messenjah zei:
Ok bedankt al!
Zit geen haast achter hoor, doe maar wanneer je tijd hebt!

Kheb ondertussen toch al iets nieuw geleerd, die jQuery kende ik nog niet!
Klik om te vergroten...

Hier, ondertussen al een handige site waar je wat van jQuery kan proeven:

Visual jQuery
L

LeSec

Legacy Member
[drone]-[1.05];12130836 zei:
Replacement happiness

Kan hier en daar misschien nog iets beter.
Klik om te vergroten...

Merci al voor de moeite!
Heb de broncode proberen te bestuderen maar kgeraak er niet aan uit waar de twee verschillende afbeeldingen zijn voor die "gekleurde stokjes" die geladen worden wanneer er over een naam gehoverd wordt. Heeft waarschijnlijk iets te maken met:

Code: 
 function ini() {
            $("a").hover(
                function() {
                    $("#intro-image").attr({src: $(this).html() + ".jpg"});
                },
                function() {
                    $("#intro-image").attr({ src: "default.jpg" });
                }
Maar kan er maar niet aan uit hoe ge er naar verwezen hebt?

Nog een klein vraagje dan: onderstaan staat er nu standard text maar stel dat ik een custom font wil gebruiken gaat zoiets makkelijk?

Nog eens merci al
D

Drone

Legacy Member
$(this).html() + ".jpg" gaat kijken naar wat er tussen de link tag staat. Dus bij <a>stef</a> gaat dat stef zijn. Voor een custom font kan je beter met images werken maar dan zal mijn script niet meer werken. Als je met images werkt zal je ook nog eens een rollover effect op de image links moeten zetten.
L

LeSec

Legacy Member
[drone]-[1.05];12131205 zei:
$(this).html() + ".jpg" gaat kijken naar wat er tussen de link tag staat. Dus bij <a>stef</a> gaat dat stef zijn. Voor een custom font kan je beter met images werken maar dan zal mijn script niet meer werken. Als je met images werkt zal je ook nog eens een rollover effect op de image links moeten zetten.
Klik om te vergroten...

Ok merci! Begrijp het!
Je kent toevallig toch geen website die alle syntaxen enzo opsomt. Kan ik misschien zelf eens zoeken voor dat rollover effect. Kzal dat wss ook ergens in dat stukje code dak vorige reply gequote heb moeten inwerken ergens veronderstel ik?
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan