Chat Hintergrundbild ändern je Raum

[Fonex47]

Hallo liebe User, ich bin auf dem Forum hier gestoßen, da ich nach Hilfe zu einer Funktion mit Javascript brauche.
Ich hoffe, es kann mir weiter geholfen werden.
Kenntnisse habe ich 0 in Javascript nur in ( html,css und php)
Folgendes Problem:

Aus dem Internet habe ich eine Javascript Funktion gefunden und so direkt übernommen, sie war auch für diesen Chat gedacht.
So jetzt hab ich ein neuen Chat aufgestellt und nun reagiert der Code bzw die funktion nicht mehr.


Das ist der Code:

//##############################################################################################################
    if (ereignis.slice(0, 5)=="room_"){

        if ($("room").value==ereignis.slice(5, ereignis.length)) return false;
        $('chatinhalt').innerHTML='';
        $("room").value=ereignis.slice(5, ereignis.length);

           // Hier ird anhand der Room_ID der entsprechende Roomname aus dem JSON Resultarray herausgefischt
        for (var i=0; i < self.jsonObjUserGlobal.userOnline.length; i++)
            if (self.jsonObjUserGlobal.userOnline[i].room_id==ereignis.slice(5, ereignis.length)){
                   var roomName = self.jsonObjUserGlobal.userOnline[i].room;
             }

            if($("room").value==1) {
$('chatinhalt').style.backgroundColor="#111111";
$('chatinhalt').style.backgroundImage="url(/raumhintergrund/lobby.png)";
$('chatinhalt').style.backgroundRepeat="no-repeat";
$('chatinhalt').style.backgroundPosition="left";
}

Ich gehe mal davon aus das "chatinhalt" die css div class ist, und "room" die room_id irgendwie abgerufen wird.

Beispiel:
Ich möchte folgendes das wenn ich in einem anderen raum wechsel der Hintergrund gewechselt wird, von lobby.png nach wohnzimmer.png

Javascript ist mega schwer
Ich hoffe ich nerve nicht mit meinem Roman.

Mfg

 

[Fonex47]

Also wenn das Bild nur in den roten Kasten soll, das vereinfacht die sache schon um einiges.
Ok ,dann werde ich da mal kucken wie man das am einfachsten umsetzten tut

Genau im roten Kasten sollen die Hintergründe platziert sein.
Alles klar danke nochmal.

 

[basti1012]

Das ist gar nicht so einfach. Der Chat läd vieles über Ajax ,dann einiges ineinander includiert und co. Habe jetzt nee Lösung gefunden. Nur da gibt es ein Problem, was du dann noch selber ändern müsstest, weil ich nicht weiß, welches Themes du gerade nutzt. Du müstest dann die einzelne <li> auf Background None setzen, damit das Bild vom <ul> da durch Schimmern kann, damit es wie erwünscht ein Hintergrundbild ist.
Aber guck erstmal, ob das so richtig ist . Ich habe jetzt irgendwelchen Bilder Kram genommen, der auf Server lag und habe die jetzt nicht angepasst auf den Hintergrund. Also nicht Wundern wenn die nicht mittig sind oder zu groß. Oder mal eins doppelt ist . Das müsstest du dann sowieso in der CSS anpassen wie du es haben möchtest.
** Link entfern, weil nicht mehr erreichbar **

 

[Fonex47]

Wahnsinn der hammer ich danke dir vielmals das du dir die mühe gemacht hast.
Das ist für mich eine lösung und wird mir aufjedenfall weiterhelfen.
Ich habs mir angeschaut das ist genau so wie ich es mir vorgestellt habe.

DANKE!

 

[basti1012]

Konntest du die Datein finden die ich geändert habe und hinzugefügt ? Oder brauchst du den Code?

 

[Fonex47]

Ich hab zwar paar codes gefunden, aber irgendwie hat es nicht so richtig funktioniert wie bei dir im chat jetzt.
Könntest du mir den code vielleicht schicken wäre mega lieb.
Mfg

 

[basti1012]

Also einmal must du die "system/room_list.php"
Ändern in

<?php
$load_data = 'setting.allow_theme, setting.default_theme, setting.language, setting.timezone, users.user_theme, users.user_access, users.user_roomid';
require_once("config1.php");
     
// show rooms list
if($data["user_access"] >= 1){
    $rooms = $mysqli->query("SELECT * FROM `rooms` WHERE `room_id` >=  1 ORDER BY room_name ASC");
    if ($rooms->num_rows > 0)
    {
        echo "<div id=\"container_user_room\">";
            while ($room = $rooms->fetch_assoc())
            {
                $countuser = $mysqli->query("SELECT `user_id` FROM `users` WHERE `user_roomid` = {$room['room_id']} AND `user_status` != '3' AND `user_status` != '4' AND `user_access` != '0' AND `user_access` != '2'");
                $datain = $countuser->num_rows;
             
                $access = $room['access'];
                if($access == 1){
                    $type = "   <span class=\"room_type user\">$opublic</span>";
                }
                if($access == 2){
                    $type = "   <span class=\"room_type vip\">$ovip</span>";
                }
                if($access == 3){
                    $type = "   <span class=\"room_type modo\">$ostaff</span>";
                }
                if($access == 4){
                    $type = "  <span class=\"room_type admin\">$oadmin</span>";
                }
                if ($room['room_id'] == $data['user_roomid']){
                    echo "<div class=\"roombutton hoverroom  hover_element sub_element selected_element\" id=\"room{$room["room_id"]}\" value=\"{$room["room_id"]}\">
                                <div class=\"room_name\"><p>{$room["room_name"]}</p></div><div class=\"room_count\"><p class=\"sub_color\">$type <span class=\"room_userin\">$datain</span></p></div>
                        </div>";
             
                }
                else {
                    echo "<div class=\"roombutton hover_element sub_element\" id=\"room{$room["room_id"]}\" value=\"{$room["room_id"]}\">
                                <div class=\"room_name\"><p>{$room["room_name"]}</p></div><div class=\"room_count\"><p class=\"sub_color\" >$type <span class=\"room_userin\">$datain</span></p></div>
                        </div>";
                }
            }
        echo "<div class=\"clear\"></div></div>
             <script>
       //Wird gebraucht um hintergrundsbilder für jeden Einzelnen Rau zu bekommen
   $('.roombutton').click(function(){
      start();
   })
        </script> ";
    }
}
else {
    echo "<div>$lang_error</div>                    ";
}
?>

Hier ist nur das script hinzugekommen
Dann auf der index.php
Kopierst su das script ganz unten vor den </body>

       <script>
//Dieses Script wird gebraucht um  Hintergrund  Bilder zu bekommen
        setTimeout(function(){
  start();
        },1000);
  function  start(){
        $.ajax({
            url: "system/room_list.php",
            cache: false,
            success: function(html){
                //$("#versteckt").val(html);// wahr fürs hiddenfeld gedacht fals nötig gewesen
                weiter(html);
            },
        });

  }  
     
function weiter(html){  
      bilder=['Meine_Scripte/bilderzumtesten/111.jpg','Meine_Scripte/bilderzumtesten/222.jpg','Meine_Scripte/bilderzumtesten/333.jpg','Meine_Scripte/bilderzumtesten/444.jpg','Meine_Scripte/bilderzumtesten/555.jpg','Meine_Scripte/bilderzumtesten/666.jpg','Meine_Scripte/bilderzumtesten/777.jpg','Meine_Scripte/bilderzumtesten/888.jpg','Meine_Scripte/bilderzumtesten/999.jpg'];
      //menge=html.split('roombutton')// wird jetzt nicht mehr gebrucht
      try{
           var eins=html.split('hoverroom')[1].split('</div>')[0];
           var zwei=eins.split('value="')[1].split('"')[0];
           $('#show_chat').css('background-image','url(http://sebastian1012.bplaced.net/'+bilder[zwei]+')')
           $('.ch_logs').css('background','none');//Kann auch in Css geändert werden
           //$('.log2').css('background','none');// Kann man über Css auch austellen oder hier wieder entkommentieren
           //$('.log1').css('background','none'); //   Hier das gleiche
      }catch(e){
           //alert(e);
      }
}
</script>
</body>
</html>

Dann mußt du halt wie oben schon gesagt die Einträge aus den Css Datein suchen damit das <li> keinen Hintergrund mehr hat sonst bekommst du Gitterstäbe Optik wo Bild nur in Streifen sichtbar ist.

Das wahrs erstmal glaube ich. Ich werde mal nach nee andere Lösung suchen , so das man über den Admin Bereich da Hintergrunds Bilder eingeben kann und das es dann auch über Datenbank gespeichert ist . Also genau so als wäre es Original.
Nur das dauert etwas länger weil man da doch einiges mehr ändern muß.
Diese Lösung jetzt ist halt mit arbeit verbunden weil man die Bilder direkt in den Datein eingeben muß und halt nee Notlöung ist.

Aber probier es mal aus. Fals es nicht klappt mußt du mir mal deinen Link geben zum Chat.

Ich habe bei mir im Chat die Bilder wieder deaktiviert , also nicht wundern das bei mir jetzt nix mehr angezeigt wird. Aber der Code steht noch im Quelltextnur auskommentiert

 

[basti1012]

So wollte dir bescheid sagen das ich in den Admin Bereich ein Menü eingebaut habe wo man jetzt Hintergrundbilder reinladen kann. Wird alles in der Db gespeichert und sieht so aus als gehöhre es zum Chat. Also kein Fusch. Du bist ja noch Admin also geh mal in den Chat rein und kucke dir das an bzw teste es aus .
Fals es dir gefällt sag bescheid dann lade ich dir geänderten Datein irgendwo hoch . Das sind 12 Datein die geändert werden mußten das ist etwas viel hier zu posten. Vorallem haben die anderen da ja auch nix von.

 

[Fonex47]

So wollte dir bescheid sagen das ich in den Admin Bereich ein Menü eingebaut habe wo man jetzt Hintergrundbilder reinladen kann. Wird alles in der Db gespeichert und sieht so aus als gehöhre es zum Chat. Also kein Fusch. Du bist ja noch Admin also geh mal in den Chat rein und kucke dir das an bzw teste es aus .
Fals es dir gefällt sag bescheid dann lade ich dir geänderten Datein irgendwo hoch . Das sind 12 Datein die geändert werden mußten das ist etwas viel hier zu posten. Vorallem haben die anderen da ja auch nix von.

Hi, danke dir nochmal für deine Hilfe.
Werde ich mir sofort anschauen.

Mit freundlichen Grüßen