• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

zwei divs rein und rauszommen

P

peyman

Mitglied
Abend Leute,

ich bin jetzt mit meinem Latein am ende. Suche schon seit mehreren Tagen nach ner Lösung, jedoch find ich nichts.

Undzwar habe ich wie aufm pic http://i41.tinypic.com/28m1q4y.jpg zu sehen eine karte erstellt , wo nebenan eine liste ist. Der Html code sieht wie folgt bis jetzt aus
Code: 
<div id="map">		<img alt="demap" src="image/deutschland.png" id="demap">
			<div id="berlin">
				<img src="image/point_small.png" alt="pin">
			</div>
			<div id="kassel">
				<img src="image/point_small.png" alt="pin">
			</div>
			<div id="wiesbaden">
				<img  src="image/point_small.png" alt="pin">
			</div>
			<div id="münchen">
				<img src="image/point_small.png" alt="pin">
			</div>
	</div>	


		<div id="listcontainer">
			<div id="kasseltext">
				<img src="image/point_big.png" alt="pin" align="left">
					<P>Werbekampagne in Kassel</P>
			</div>
			<div id="berlintext">
				<img src="image/point_small.png" alt="pin" align="left">
					<P>Werbekampagne in Berlin</P>
			</div>
			<div id="wiesbadentext">
				<img src="image/point_small.png" alt="pin" align="left">
					<P>Werbekampagne in Wiesbaden</P>
			</div>
			<div id="münchentext">
				<img src="image/point_small.png" alt="pin" align="left">
					<P>Werbekampagne in München</P>
			</div>
		</div>

Nun möchte ich das zb die Stecknadel bei Kassel aufpopt und der dazu gehörige text ( in dem fall Werb.... Kassel). Beim aufpopen der Stecknadel soll die kleine nadel wie auf der Karte zu sehen ist durch die große ersetzt werden wie sie jetzt aufm screen schon bei kassel zu sehen ist.

Sprich das Steckpunkt und text gleichzeitig aufpopen und wieder zurück gehen auf die ursprungsgröße und danach das nächste paar usw.

Bin nun schon seit 3 tagen auf der suche und ich find einfach nix.
 
Werbung:
Hallo,

das hatten wir doch letzten schon gesagt wenn ich mich richtig erinnere.
gebe nadel und Adresse eine gleiche classe.

jetzt kannst die per animation() größer werden lassen und auch wieder kleiner

Umlaute in css geht ja gar nicht.
was hast bis jetzt versucht?

Cheffchen
 
Bis jetzt ja jquery aber anscheinend find ich nicht die richtigen animationen.

Werd die dann mal in eine klasse umbennen (text und jeweilige nadel zb .kassel). Welche animation muss ich dafur den verwenden ?... Resize , fadein out, etc haben bis jetzt nicht gefruchtet .
 
Werbung:
Wie wäre es mit einem CSS3-Attribut, transform: scale? Das lässt sich mit jQuery auch übergeben.

Für weitere Hilfe poste aber erstmal einen Ansatz.
 
Bin soweit fertig mit dem Script, jetzt würde ich gerne noch das sich die Nadeln beim aufploppen von dem was jetzt zu sehen ist in ein anderes icon verändert. Könnt ihr mir da helfen. Also das es wären der Animation ein anderes Icon annimmt.

www.adlocal.de login : ad pw: local123

Mein aktueller Ansatz ist der .


var cities = [ { city : 'Berlin', top : 100, left : 200 , text : 'Nix Design ' },
{ city : 'Berlin', top : 100, left : 200 , text : 'Blumen Koch Florist' },
{ city : 'Kassel', top : 150, left : 120 , text : 'Cinestar' },
{ city : 'Kassel', top : 150, left : 120 , text : 'Uhrenhaus Paul Otto' },
{ city : 'Kassel', top : 150, left : 120 , text : 'Athletic-Fitness' },
{ city : 'Kassel', top : 150, left : 120 , text : 'Marcs Mod' },
{ city : 'Wiesbaden', top : 230, left : 90 , text : 'Ladyfitness' },
{ city : 'Wiesbaden', top : 230, left : 90 , text : 'Solarium -Sunpoint' },
{ city : 'Wiesbaden', top : 230, left : 90 , text : 'Blumenstudio Zabel' },
{ city : 'Wiesbaden', top : 230, left : 90 , text : 'Peter Hahn Modehaus' },
{ city : 'München', top : 285, left : 165 , text : 'Sturm § Kollegen ' },
{ city : 'München', top : 285, left : 165 , text : 'Druckerei München ' },
{ city : 'München', top : 285, left : 165 , text : 'Alexander Hubert Versicherung ' },
{ city : 'Hamburg', top : 57, left : 138 , text : 'Godiva Chocolatier' },
{ city : 'München', top : 285, left : 165 , text : 'Joachim Bongarts Finanzpartner' },
{ city : 'Hamburg', top : 57, left : 138 , text : 'Reisebüro Koch' },
{ city : 'Hamburg', top : 57, left : 138 , text : 'Autohaus Claas Wehner' },
{ city : 'Hamburg', top : 57, left : 138 , text : 'Schlüsseldienst Reese' },
{ city : 'Stuttgart', top : 265, left : 095 , text : 'Südwesttextil ' },
{ city : 'Stuttgart', top : 265, left : 095 , text : 'Sportmedizin ' },
{ city : 'Dortmund', top : 110, left : 075 , text : 'Super Cut Friseur ' },
{ city : 'Dortmund', top : 110, left : 075 , text : 'Nachhilfe Abacus ' },
{ city : 'Dortmund', top : 110, left : 075 , text : 'Kino Schauburg ' },
{ city : 'Köln', top : 135, left : 070 , text : 'Giga Center ' },
{ city : 'Köln', top : 135, left : 070 , text : 'Biggis Fashion Store ' },
{ city : 'Köln', top : 135, left : 070 , text : 'Schmuck + Form ' },
{ city : 'Leipzig', top : 145, left : 175 , text : 'Kult ' },
{ city : 'Leipzig', top : 145, left : 175 , text : 'Pfandhaus Schauer & Co ' },
{ city : 'Leipzig', top : 145, left : 175 , text : 'Bekö - Art Tattoo ' },
{ city : 'Nürnberg', top : 225, left : 145 , text : 'Schneider Motorradvertrieb' },
{ city : 'Nürnberg', top : 225, left : 145 , text : 'Kiku Kinderland' },
{ city : 'Nürnberg', top : 225, left : 145 , text : 'Kiku Kinderland' },
{ city : 'Nürnberg', top : 225, left : 145 , text : 'Freibad Stadion' },
{ city : 'Karlsruhe', top : 245, left : 75 , text : 'Mystic Tattoo ' },
{ city : 'Karlsruhe', top : 245, left : 75 , text : 'Seeger & russwurm Immobilien' },
{ city : 'Karlsruhe', top : 245, left : 75 , text : 'Hirsch Reisen' },
{ city : 'Frankfurt', top : 205, left : 90 , text : 'First Reisebüro ' },
{ city : 'Frankfurt', top : 205, left : 90 , text : 'Kamera Film Gmbh ' },
{ city : 'Frankfurt', top : 205, left : 90 , text : 'Hochzeitsaut im Rheingau ' },

];
var done = [];


$(function () {
var timer = 2000;
$('#listcontainer').html ('');
setInterval (rotate, timer);
setInterval (removeCity, timer);
})


function rotate () {
if (done.length === cities.length)
return;

while (true) {
var random = getRandomInt (0, cities.length-1);
if (!in_array (done, random)) {
done.push (random);


addCity (cities[random]);
break;
}
}
}


function addCity (item) {
$('#map').append ('<div id="'+item.city+'" style="top:'+item.top+'px;left:'+item.left+'px"><i mg src="image/point_small.png" alt="pin" title="'+item.city+'"></div>');

// city
$('#'+item.city).fadeIn(1000);
var factor = 2;
$('#'+item.city+' img').animate ({
top: '-=' + -2,
left: '-=' + -1,
width: 38
})
.delay (50)
.animate ({
top: '-=' + -2,
left: '-=' + -1,
width: 30
});

// list container
$('#listcontainer').prepend (
'<div><img src="image/point_small.png" alt="pin" align="left"><p>'+item.text+' in '+item.city+'</p></div>'
);

if ($('#listcontainer').children().length > 5) {
$('#listcontainer').children().last().remove ();
}
// console.log ($('#listcontainer').children().length);
}


function removeCity () {
// only start on minimum 4 items
if (done.length <= 4)
return;

// prevent to clear all items
if (done.length <= 3)
return;

$('#'+cities[done[0]].city).fadeOut(1000, function () { $(this).remove(); });
done.splice(0, 1);
}




function getRandomInt (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}


function in_array(array, value) {
for(var i=0;i<array.length;i++) {
if(array === value) {
return true;
}
}
return false;
}


 
Werbung:
Ziemlicher Spaghetticode, aber ok. ;)

Ein Ansatz wäre, hierfür

HTML: 
<div><img src="image/point_small.png" alt="pin" align="left"><p>'+item.text+' in '+item.city+'</p></div>

eine Funktion schreiben, die das scr-Attribut austauscht.

Beispiel:
HTML: 
function imgChange() {
    var img = $('div img').prop('src') === 'image/point_small.png' ? 'image/point_small.png' : 'image/point_big.png';
    return img;
}

und diese nach dem prepend() in einem Timer aufrufen. Wenn fadeIn() 1000 beträgt, dann vielleicht mit 500.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben